Heim >Web-Frontend >CSS-Tutorial >Schritte zum Implementieren einer CSS3-Animation, um einen Hervorhebungslichtbogeneffekt zu erzeugen
Schritte zum Implementieren einer CSS3-Animation, um einen Hervorhebungslichtbogeneffekt zu erzeugen
- php中世界最好的语言Original
- 2017-11-30 11:27:532114Durchsuche
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>。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
Verwandte Implementierung des Verformungsattributs in CSS3-Schritte
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!