Maison >interface Web >tutoriel CSS >Étapes pour implémenter l'animation CSS3 pour créer un effet d'arc de lumière de surbrillance
Étapes pour implémenter l'animation CSS3 pour créer un effet d'arc de lumière de surbrillance
- php中世界最好的语言original
- 2017-11-30 11:27:532111parcourir
Les amis prudents remarqueront peut-être que certaines images auront un flash d'arc lumineux à haute luminosité, ce qui est un effet très éblouissant. Ce n'est pas l'attribut par défaut de l'image, mais l'effet obtenu en utilisant l'attribut d'animation de CSS3. Voici l’effet : permettez-moi de partager un exemple que tout le monde pourra étudier.
<!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>。Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Tutoriel sur l'utilisation de l'attribut word-break en CSS3
Implémentation connexe de l'attribut déformation dans css3 Étapes
étapes HTML pour obtenir un effet de suspension 3D
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!