漪漣波紋效果 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 領紅包，領到大紅包的小夥伴趕緊使用哦！

支援你我，掃一掃紅包