制作鼠标放在图片上，一闪而过水波的效果

最新推荐文章于 2020-12-04 16:03:59 发布

datuoyou6705

最新推荐文章于 2020-12-04 16:03:59 发布

阅读量285

点赞数

文章标签： c# javascript ViewUI

原文链接：http://www.cnblogs.com/Afanty/p/7052765.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    　　div{width:800px;height:600px;overflow:hidden;}                  /* div宽度和高度 超出隐藏 */
    　　div a:hover::before{transition: all 0.5s;left:850px;}               /* css3过度样式  before离左边850像素 */
　　    div a:before{content: "";                  
   　　 position: absolute;
   　　 width: 50px;
   　　 height: 600px;
   　　 top: 0;
   　　 left: -130px;
   　　 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);}              /* 这里是给反光加样式的css3代码，就不一一解释了 */
    </style>
</head>
<body>
<div><a href="javascript:;"><img src="img/1.jpg"></a></div>
</body>
</html>

转载于:https://www.cnblogs.com/Afanty/p/7052765.html

datuoyou6705

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作鼠标放在图片上，一闪而过水波的效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> 　　div{width:800px;height:600px;ove...
复制链接

扫一扫