效果图：
hover.gif
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root {
/* :root 相当于全局设置一个宽高的变量,此处可以不用这样写也能实现效果 */
--height: 100px;
--width: 200px;
}
* {
margin: 0 auto;
}
body,
html {
height: 100%;
width: 100%
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.button-box {
width: 200px;
height: 70px;
box-shadow: 2px 2px 5px #ccc;
text-align: center;
line-height: 70px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.button-box .text {
color: rgb(15, 240, 221);
text-transform: uppercase;
font-weight: bold;
font-size: 23px;
position: relative;
z-index: 5;
transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1);
}
.button-box:hover .text{
color: white;
}
.button-box .back {
position: absolute;
left: -50%;
bottom: -50%;
width: 0;
height: 0;
filter: url(#filter);
border-radius: 50%;
z-index: 5;
transition: all 2.5s cubic-bezier(0.1, 0.22, 0.3, 1);
background: #0dbb55;
}
.button-box:hover .back {
width: calc(2 * var(--width)) !important;
height: calc(2 * var(--height)) !important;
}
</style>
</head>
<body>
<!-- https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter -->
<svg width="0" height="0" style="display: none">
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
<feDisplacementMap in="SourceGraphic" scale="100" />
</filter>
</svg>
<div class="button-box">
<div class="back"></div>
<span class="text">hover</span>
</div>
</body>
</html>
