做法:
给按钮的文字添加伪类,然后利用阴影是移动和原本元素大小相同的原理
在动画中依次添加多个水平方向移动的阴影
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./index.css">
<style>
.box{
width: 400px;
height: 400px;
border: solid 1px blueviolet;
display: flex;
align-items: center;
justify-content: center;
margin: 100px auto;
perspective: 900px;
}
.box>div{
width: 200px;
height: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 4em;
background-color: #8A2BE2;
}
.box>div::after{
content: '';
width: 4px;
height: 4px;
animation-name:hd;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes hd{
from{
box-shadow:none;
}
30%{
box-shadow: 4px 0 0 currentColor;
}
60%{
box-shadow: 4px 0 0 currentColor,12px 0 0 currentColor;
}
90%{
box-shadow: 4px 0 0 currentColor,12px 0 0 currentColor,20px 0 0 currentColor;
}
}
</style>
</head>
<body class='me'>
<div class='box'>
<div class='heart'>内容</div>
<!-- <div>2</div> -->
</div>
</body>
</html>
效果图: