<!--
* @Author: elick xwiwi@foxmail.com
* @Date: 2024-09-27 21:41:19
* @LastEditors: elick xwiwi@foxmail.com
* @LastEditTime: 2024-09-27 21:46:41
* @FilePath: \badminc:\Users\elick\Desktop\5.html
* @Description: 描述
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>涟漪效果</title>
<style>
.example {
position: relative;
margin: 150px auto;
width: 50px; /* 按钮的宽度 */
height: 50px; /* 按钮的高度 */
}
.dot:before {
content: " ";
position: absolute;
z-index: 2;
left: 50%; /* 设置为50%以中心对齐 */
top: 50%; /* 设置为50%以中心对齐 */
width: 100px; /* 原点宽度 */
height: 100px; /* 原点高度 */
background-color: #0093E9; /* 中心小点颜色 */
border-radius: 50%;
transform: translate(-50%, -50%); /* 确保原点中心对齐 */
}
.dot:after {
content: " ";
position: absolute;
z-index: 1;
left: 50%; /* 设置为50%以中心对齐 */
top: 50%; /* 设置为50%以中心对齐 */
width: 120px; /* 增大涟漪的最大宽度 */
height: 120px; /* 增大涟漪的最大高度 */
background-color: transparent; /* 去掉背景颜色 */
border: 3px solid #0093E9; /* 增加涟漪的边框宽度为3px */
border-radius: 50%;
animation-name: ripple; /* 动画属性名 */
animation-duration: 2s; /* 动画持续时间 */
animation-timing-function: ease; /* 动画频率 */
animation-delay: 0s; /* 动画延迟时间 */
animation-iteration-count: infinite; /* 无限循环 */
animation-direction: normal; /* 动画方式 */
transform: translate(-50%, -50%); /* 确保涟漪中心对齐 */
}
@keyframes ripple {
0% {
opacity: 1;
width: 20px; /* 修改初始宽度 */
height: 20px; /* 修改初始高度 */
}
100% {
opacity: 0; /* 最后透明 */
width: 130px; /* 增大涟漪的最大宽度 */
height: 130px; /* 增大涟漪的最大高度 */
}
}
</style>
</head>
<body>
<div class="example">
<div class="dot"></div>
</div>
</body>
</html>