CSS如何实现图片高亮光弧效果
这篇文章主要介绍了CSS如何实现图片高亮光弧效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
为乐东黎族等地区用户提供了全套网页设计制作服务,及乐东黎族网站建设行业解决方案。主营业务为网站设计制作、网站制作、乐东黎族网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过
body{
margin: 0;
}
a.floor{
display: block;
height: 475px;
}
a.floor:hover:before{
-webkit-transition: left 1.5s;
-moz-transition: left 1.5s;
transition: left 1.5s;
left: 920px;
}
a.floor:before{
content: "";
position: absolute;
width: 80px;
height: 475px;
top: 0;
left: -150px;
overflow: hidden;
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);
}
感谢你能够认真阅读完这篇文章,希望小编分享的“CSS如何实现图片高亮光弧效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站名称:CSS如何实现图片高亮光弧效果
链接分享:http://cdiso.cn/article/gieicj.html