CSS悬浮实现圆形涟漪（水滴涟漪）效果

本文链接：https://blog.csdn.net/ALeeYaaaa/article/details/120842333

实现思路：

一、代码结构：

1、iconfont图标外围父元素为span块（样式为inner-wrapper），父父元素为div（样式为middle-wrapper）；

2、inner-wrapper设置伪元素，固定好宽高，设置好border-radius，为实现圆形涟漪效果做准备；

二、代码实现

1、当鼠标悬浮在middle-wrapper时，实现iconfont的放大效果scale（2）；

2、当鼠标悬浮在middle-wrapper时，实现inner-wrapper的伪元素进行放大，并且设置好border-color（应为rgba形式，透明度设置为0（是为了实现最后的涟漪消失的效果））、过度时间（能看到涟漪的产生和消失）

（icontfont根据自身需要引入与使用即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont.css">

    <style>

        body {
            background: #000;
        }

        .most-wrapper {
            display: flex;
            width: 300px;
            height: 66px;
            justify-content: space-evenly;
        }

        .middle-wrapper {
            width: 66px;
            line-height: 66px;
            color: #bbb;
            transition: .3s;
        }

        .middle-wrapper:hover {
            transform: scale(1.2);
            transition: .3s;
            color: white;
            cursor: pointer;
        }

        .inner-wrapper {
            width: 35px;
            height: 35px;
            line-height: 35px;
            display: block;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            border-radius: 50%;
        }

        .inner-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }

        .middle-wrapper:hover .inner-wrapper::before {
            border: solid 1px rgba(255,255,255,0);
            border-radius: 50%;
            transition: .4s linear;
            transform: scale(2.5);
        }

        .iconfont {
            font-size: 35px;
        }

    </style>

</head>

<body>

    <div class="most-wrapper">

        <div class="middle-wrapper">
            <span class="inner-wrapper">
                <i class="iconfont icon-kejituandui"></i>
            </span>
        </div>

        <div class="middle-wrapper">
            <span class="inner-wrapper">
                <i class="iconfont icon-kejituandui"></i>
            </span>
        </div>

        <div class="middle-wrapper">
            <span class="inner-wrapper">
                <i class="iconfont icon-kejituandui"></i>
            </span>
        </div>

    </div>
    
</body>

</html>