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

最新推荐文章于 2021-06-03 08:29:50 发布

原创最新推荐文章于 2021-06-03 08:29:50 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

本文介绍如何在鼠标悬停于图片上时，通过CSS和JavaScript创建一个短暂显现的水波纹效果，提升用户体验。

<!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>