使用CSS制作一个水滴充电特效

最新推荐文章于 2022-12-07 09:02:06 发布

努力学习的k

最新推荐文章于 2022-12-07 09:02:06 发布

阅读量419

点赞数

文章标签： html 前端 css3 css

本文链接：https://blog.csdn.net/yigetutouzai/article/details/125842846

版权

今天又学习了一个特效，有点类似安卓手机充电时的特效，就叫做水滴充电特效把

效果图：

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>水滴充电特效</title>
  <style>
    html{
      font-size: 10px;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
      background-color: #000;
      filter:contrast(50);
    }
    .drop{
      width: 20rem;
      height: 20rem;
      position: absolute;
      background-color: #3bff5a;
      border-radius: 50%;
      filter: blur(20px);
      opacity: 0;
      animation: 3s drop linear infinite;
      transform: scale(1.2) translateY(-500%);
    }
    .drop:nth-child(2){
      animation-delay: 0.8s;
    }
    .drop:nth-child(3){
      animation-delay: 1.1s;
    }
    .collection{
      width: 20rem;
      height: 20rem;
      background-color:#3bff5a;
      border-radius: 50%;
      filter: blur(20px);
      animation: 5s collection linear infinite;

    }
    .container span{
      position: absolute;
      font-size: 2.5rem;
      font-family: 'Helvetica Neue', Hel;
      font-weight: bold;
    }
    @keyframes drop {
      0%{
        opacity: 0;
        transform: scale(1) translateY(-600%);
      }
      50%{
        opacity: 1;
        transform: scale(.5) translateY(-100%);
      }
      100%{
        transform: scale(.3) translateY(0);
      }
    }
    @keyframes collection {
      0%{
        width: 20rem;
        transform: scale(1) rotate(0);
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
      }
      50%{
        width: 18rem;
        transform: scale(1.2) rotate(180deg);
        border-top-left-radius: 30%;
        border-bottom-left-radius: 60%;
      }
      100%{
        width: 20rem;
        transform: scale(1) rotate(360deg);
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
      }
    }
  </style>
</head>
<body>
<div class="container">
   <div class="drop"></div>
   <div class="drop"></div>
   <div class="drop"></div>
   <div class="collection"></div>
   <span>充电中</span>

</div>
</body>
</html>