水滴特效（HTML + CSS）
程序员文章站
2022-05-18 14:16:16
...
水滴特效
本案例选自，B站-码小渣
特效展示
案例包括
- water.html
- water.css
代码
界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="water.js"></script>
<link rel="stylesheet" href="water.css">
</head>
<body>
<div class="container">
<div class="circle">
<div class="wave"></div>
</div>
</div>
</body>
</html>
css样式
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background: linear-gradient(
rgb(95, 95, 250) 10%,
rgb(3, 3, 110)
); /*线性渐变色*/
}
/* 提取公共代码 */
.circle,
.wave {
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 水滴 */
.circle {
border: 3px solid darkturquoise;
padding: 10px;
}
/* 水波 */
.wave {
background: darkturquoise;
overflow: hidden; /*隐藏超出部分*/
}
.wave:after {
content: "";
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.8);
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -60%);
border-radius: 40%;
animation: wave 5s linear infinite; /*绑定动画 5s 匀速*/
}
.wave::before {
content: "waterball";
position: absolute;
left: 50%;
top: 0;
color: darkturquoise;
z-index: 99;
transform: translate(-50%, 30px);
text-transform: uppercase;
}
/* animation动画 */
@keyframes wave {
100% {
transform: translate(-50%, -60%) rotate(360deg); /*位置不动，360度旋转*/
}
}
上一篇： pygame的一个小问题，未解决
下一篇： js单例模式——创建弹窗