Schritte zum Implementieren einer CSS3-Animation, um einen Hervorhebungslichtbogeneffekt zu erzeugen-CSS-Tutorial-php.cn

Schritte zum Implementieren einer CSS3-Animation, um einen Hervorhebungslichtbogeneffekt zu erzeugen

php中世界最好的语言

Freigeben： 2017-11-30 11:27:53

Original

2103 Leute haben es durchsucht

Aufmerksame Freunde bemerken möglicherweise, dass einige Bilder einen Lichtbogen mit hoher Helligkeit haben, der einen sehr blendenden Effekt erzeugt. Dies ist nicht das Standardattribut des Bildes, sondern ein Effekt, der mithilfe der Animationsattribute von CSS3 erstellt wurde Der Effekt: Lassen Sie mich ein Beispiel vorstellen, das jeder studieren kann.

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>CSS3动画实现高亮光弧效果</title>
<style type="text/css">
body{margin:0;padding:0;}
.box{width:1000px;margin:200px auto;height:500px;position:relative;text-align:center;}
.box:hover .rolled{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
-ms-animation-play-state:paused;
}
.rolled{
position:absolute;
top: 0;
width:80px;
height:500px;
background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
-webkit-animation:rolled 2.5s .2s ease both infinite;
-moz-animation:rolled 2.5s .2s ease both infinite;
-o-animation:rolled 2.5s .2s ease both infinite;
-ms-animation:rolled 2.5s .2s ease both infinite;
overflow: hidden;
}
@-webkit-keyframes rolled{
0%{left:-150px ;}
100%{left:920px;}
}
@-moz-keyframes rolled{
0%{left:-150px ;}
100%{left:920px;}
}
@-o-keyframes rolled{
0%{left:-150px ;}
100%{left:920px;}
}
@-ms-keyframes rolled{
0%{left:-150px ;}
100%{left:920px;}
}
@keyframes rolled{
0%{left:-150px ;}
100%{left:920px;}
}
</style>
</head>
<body>
<div>
<img src="http://tangjiusheng.com/d/file/css3/2017-05-24/f2ff69d3c4e94e4a65c9f4ab203d4811.jpg">
<div></div>
</div>
</body>
</html>。

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Tutorial zur Verwendung des Wortumbruch-Attributs in CSS3

HTML-Schritte zur Erzielung eines 3D-Aufhängungseffekts

Das obige ist der detaillierte Inhalt vonSchritte zum Implementieren einer CSS3-Animation, um einen Hervorhebungslichtbogeneffekt zu erzeugen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!