实现思路：
一、代码结构：
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>
如果觉得《CSS悬浮实现圆形涟漪（水滴涟漪）效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
