漪涟波纹效果 css3 animation

前端入坑纪 62

今天来分享 一个类似水波纹扩散的鼠标hover效果

好，详解如下！

OK，first things first！ 点我查看实际效果

漪涟,爱你哦(手机上看效果,可能要点下它)

HTML 结构

<a class="ylBtn" href="javascript:;">爱你o</a>

给我一个a, 还你一个漪涟. HTML就是只要个a就够了.

CSS 结构

           .ylBtn{
            position: relative;
            display: block;
            line-height: 47px;
            height: 47px;
            width: 47px;
            font-size: 12px;
            background-color: bisque;
            color: #666;
            text-align: center;
            border-radius: 50%;
            margin: 10% auto
        }
        .ylBtn::before{
            content: "";
            display: block;
            position:absolute;
            z-index: -1;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #fff;
            opacity: .2;
        }
        .ylBtn::after{
            content: "";
            display: block;
            position:absolute;
            z-index: -2;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #fff;
            opacity: 0;
        }
        @keyframes yls{
            0%{
                transform: scale(1);
                opacity:.5;
            }
            100%{
                transform: scale(1.8);
                opacity: 0;
            }
        }
        @keyframes ylss{
            0%{
                transform: scale(1);
                opacity:.5;
            }
            100%{
                transform: scale(1.3);
                opacity: 0;
            }
        }
        .ylBtn:hover::before{
            animation: yls 1200ms linear infinite;
        }
        .ylBtn:hover::after{
            animation: ylss 1200ms ease-out infinite;
        }

1. 波纹通过两个伪元素来实现,分别是::before,::after ,相对a来绝对定位
2. 波纹的动画通过@keyframes 来分别创建,各自有不同的透明度和大小的变化
3. 两伪元素都是在hover的时候,执行动画效果.infinite参数可以让动画一直循环

总结

总得说来,这个效果不算很难.想要调出好的漪涟效果,最关键的还是动画的animation-timing-function.我这里用 ease-out 和 linear 随意组合了下.有兴趣的小伙伴可以去百度深入了解下

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

*****作者原创内容,大家互相支持,谢谢!!!*****

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包