水滴特效（HTML + CSS）

最新推荐文章于 2024-08-13 08:59:42 发布

LiuszZZ

最新推荐文章于 2024-08-13 08:59:42 发布

阅读量2.3k

点赞数 1

分类专栏： css特效文章标签： css html

本文链接：https://blog.csdn.net/qq_39720594/article/details/106083279

版权

css特效专栏收录该内容

4 篇文章 0 订阅

订阅专栏

水滴特效

本案例选自，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度旋转*/
  }
}