CSS3动画做出高亮光弧效果的实现步骤
程序员文章站
2022-03-17 13:25:32
...
细心的朋友可能会注意到,有的图片会有一道高亮光弧闪过很炫的效果,这并不是图片的默认属性,而是用CSS3的动画属性做出的效果,下面就给大家分享一份实例供大家研究。
<!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>。
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是CSS3动画做出高亮光弧效果的实现步骤的详细内容,更多请关注其它相关文章!
上一篇: 有关图形组合的文章推荐10篇
下一篇: 分享html中页面跳转传递参数的实例代码