水滴特效(HTML + CSS)

水滴特效

本案例选自,B站-码小渣

特效展示

水滴特效(HTML + CSS)_第1张图片

案例包括

  • water.html
  • water.css

代码

界面


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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度旋转*/
  }
}

你可能感兴趣的:(css特效,css,html)