您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

CSS实现高亮光弧效果

2024/2/18 3:39:11发布11次查看
使用css3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下:
代码如下:
doctype html>html lang=en>head> meta charset=utf-8> title>lighttitle> style> 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); } style>head>body>a class=floor href=javascript:;> img src=./images/girl.jpg height=475 width=760 alt=>a>body>html>
存下来备用!
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product