CSS特效---华为手机充电特效；兼容各大浏览器

🕗 发布于 2024-04-17 12:11 css 前端 html5

1、演示

2、一切尽在代码中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        background-color: #000;
        overflow: hidden;
      }

      @property --num {
        syntax: '<integer>';
        initial-value: 0;
        inherits: false;
      }

      .g-number {
        position: absolute;
        width: 300px;
        top: 27%;
        text-align: center;
        font-size: 32px;
        z-index: 10;
        color: #fff;
      }

      .g-container {
        position: relative;
        height: 400px;
        width: 300px;
        margin: auto;
      }

      .g-contrast {
        filter: contrast(10) hue-rotate(0);
        width: 300px;
        height: 400px;
        background-color: #000;
        overflow: hidden;
        -webkit-animation: hueRotate 10s infinite linear;
        animation: hueRotate 10s infinite linear;
      }

      .g-circle {
        position: relative;
        width: 300px;
        height: 300px;
        box-sizing: border-box;
        filter: blur(8px);
      }
      .g-circle::before {
        content: '';
        position: absolute;
        width: 176px;
        height: 176px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: #000;
        z-index: 10;
      }
      .g-circle::after {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0);
        border-radius: 42% 38% 62% 49%/45%;
        background-color: #00ff6f;
        -webkit-animation: rotate 10s infinite linear;
        animation: rotate 10s infinite linear;
      }

      .g-bubbles {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100px;
        height: 40px;
        transform: translate(-50%, 0);
        border-radius: 100px 100px 0 0;
        background: #00ff6f;
        filter: blur(6px);
      }

      li {
        position: absolute;
        border-radius: 50%;
        background-color: #00ff6f;
      }

      li:nth-child(0) {
        left: 56px;
        width: 28px;
        height: 28px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 7s ease-in-out -1.433s infinite;
        animation: moveToTop 7s ease-in-out -1.433s infinite;
      }

      li:nth-child(1) {
        left: 21px;
        width: 23px;
        height: 23px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 7s ease-in-out -3.484s infinite;
        animation: moveToTop 7s ease-in-out -3.484s infinite;
      }

      li:nth-child(2) {
        left: 65px;
        width: 21px;
        height: 21px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 5s ease-in-out -2.673s infinite;
        animation: moveToTop 5s ease-in-out -2.673s infinite;
      }

      li:nth-child(3) {
        left: 24px;
        width: 19px;
        height: 19px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 4s ease-in-out -4.448s infinite;
        animation: moveToTop 4s ease-in-out -4.448s infinite;
      }

      li:nth-child(4) {
        left: 41px;
        width: 17px;
        height: 17px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 8s ease-in-out -4.181s infinite;
        animation: moveToTop 8s ease-in-out -4.181s infinite;
      }

      li:nth-child(5) {
        left: 36px;
        width: 25px;
        height: 25px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 7s ease-in-out -3.371s infinite;
        animation: moveToTop 7s ease-in-out -3.371s infinite;
      }

      li:nth-child(6) {
        left: 64px;
        width: 24px;
        height: 24px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 6s ease-in-out -4.786s infinite;
        animation: moveToTop 6s ease-in-out -4.786s infinite;
      }

      li:nth-child(7) {
        left: 29px;
        width: 16px;
        height: 16px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 5s ease-in-out -3.911s infinite;
        animation: moveToTop 5s ease-in-out -3.911s infinite;
      }

      li:nth-child(8) {
        left: 57px;
        width: 22px;
        height: 22px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 4s ease-in-out -3.463s infinite;
        animation: moveToTop 4s ease-in-out -3.463s infinite;
      }

      li:nth-child(9) {
        left: 80px;
        width: 26px;
        height: 26px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 4s ease-in-out -1.537s infinite;
        animation: moveToTop 4s ease-in-out -1.537s infinite;
      }

      li:nth-child(10) {
        left: 59px;
        width: 17px;
        height: 17px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 4s ease-in-out -3.992s infinite;
        animation: moveToTop 4s ease-in-out -3.992s infinite;
      }

      li:nth-child(11) {
        left: 55px;
        width: 24px;
        height: 24px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 5s ease-in-out -1.554s infinite;
        animation: moveToTop 5s ease-in-out -1.554s infinite;
      }

      li:nth-child(12) {
        left: 84px;
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 9s ease-in-out -1.917s infinite;
        animation: moveToTop 9s ease-in-out -1.917s infinite;
      }

      li:nth-child(13) {
        left: 62px;
        width: 22px;
        height: 22px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 6s ease-in-out -3.77s infinite;
        animation: moveToTop 6s ease-in-out -3.77s infinite;
      }

      li:nth-child(14) {
        left: 80px;
        width: 21px;
        height: 21px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 8s ease-in-out -0.239s infinite;
        animation: moveToTop 8s ease-in-out -0.239s infinite;
      }

      li:nth-child(15) {
        left: 85px;
        width: 17px;
        height: 17px;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: moveToTop 6s ease-in-out -2.587s infinite;
        animation: moveToTop 6s ease-in-out -2.587s infinite;
      }

      @-webkit-keyframes rotate {
        50% {
          border-radius: 45%/42% 38% 58% 49%;
        }
        100% {
          transform: translate(-50%, -50%) rotate(720deg);
        }
      }

      @keyframes rotate {
        50% {
          border-radius: 45%/42% 38% 58% 49%;
        }
        100% {
          transform: translate(-50%, -50%) rotate(720deg);
        }
      }
      @-webkit-keyframes moveToTop {
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0.1;
          transform: translate(-50%, -180px);
        }
      }
      @keyframes moveToTop {
        90% {
          opacity: 1;
        }
        100% {
          opacity: 0.1;
          transform: translate(-50%, -180px);
        }
      }
      @-webkit-keyframes hueRotate {
        100% {
          filter: contrast(15) hue-rotate(360deg);
        }
      }
      @keyframes hueRotate {
        100% {
          filter: contrast(15) hue-rotate(360deg);
        }
      } /*# sourceMappingURL=charging.css.map */
    </style>
  </head>
  <body>
    <div class="g-container">
      <div class="g-number">0%</div>
      <div class="g-contrast">
        <div class="g-circle"></div>
        <ul class="g-bubbles">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    const number = document.querySelector('.g-number')
    let num = 0
    let timer = null
    timer = setInterval(() => {
      num += 1
      if (num >= 100) clearInterval(timer)
      number.textContent = num + '%'
    }, 100)
  </script>
</html>

原文地址：https://blog.csdn.net/nibabaoo/article/details/137830241

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：基于小程序实现的餐饮外卖系统
下一篇：LeetCode 每日一题 Day 123-136

树莓派下，centos7操作系统， TensorFlow java版实现身份证识别，文字读取
通过上述步骤，你可以在树莓派的CentOS 7系统上使用TensorFlow Java和Tesseract实现身份证识别和文字读取功能。这包括设置环境、准备预训练的检测模型、编写和运行Java代码来处
阅读更多2024-07-27
【在排序数组中查找元素的第一个和最后一个位置】python刷题记录
等等，这好像是二分查找问题。(因为这是个排序数组，然后如果有相同元素一定是相邻的。很憋屈地过了，用了2个哈希表，感觉好浪费。有点easy的感觉，感觉能用哈希表。
阅读更多2024-07-27
AI绘画入门实践 | Midjourney：使用 --iw 通过垫图生成头像
在 Midjourney 中，--iw可以根据上传的图作为垫图，影响生成结果的构图、风格与颜色。数值越接近2：MJ 参考图片的权重越大数值越接近0：MJ 参考提示词的权重越大PS：使用--ar保持出图
阅读更多2024-07-27
【strace命令详解：Linux下的强大跟踪工具】
🌈你好呀！我是山顶风景独好🎈欢迎踏入我的博客世界，能与您在此邂逅，真是缘分使然！😊🌸愿您在此停留的每一刻，都沐浴在轻松愉悦的氛围中。📖这里不仅有丰富的知识和趣味横生的内容等您来探索，更是一个自由交流
阅读更多2024-07-27
AT_abc273_a
这题只需将一个数的阶乘求出来即可：注意：题目里说了，0 的阶乘为 1。
阅读更多2024-07-27
【优质精选】12节大模型系列教学课程之二：RAG 原理与应用
RAG 技术在众多领域都有着广泛且深入的应用。在体育领域，它能够应对比赛数据的复杂性和多样性，通过构建关系动作图来分析运动员的表现，为教练员和运动员制定训练计划和调整比赛策略提供有力支持。例如，可以对
阅读更多2024-07-27
知名医药医疗行业人工智能数字化转型讲师培训师唐兴通谈医药医疗销售与创新思维创新管理数字化AI及大客户销售医美生活美容品牌市场
先后出版《引爆社群：移动互联网时代新4C法则》《数字化战略》《穿越周期：数字化转型与动态能力》《创新的扩散》《开放式创新》《梯次增长》《组合式创新》《种子用户方法论》《决战第三屏》等12部作品。先后为
阅读更多2024-07-27
MySQL InnoDB事务隔离和并发控制面试题详解
Hash 索引是一种基于 Hash 表的数据结构，用于快速查找数据。其原理是通过哈希函数将键映射到哈希表的某个位置，然后直接访问该位置的数据。优点是查找速度非常快，缺点是无法进行范围查询和顺序访问。原
阅读更多2024-07-27
算法刷题day20|回溯：39. 组合总和、40. 组合总和 II、131. 分割回文串
例如，candidates = [1, 1, 2], target = 3，遍历第一个 1 时，会取到[1, 2]，遍历到第二个 1 时，也会取到[1, 2]，此时就要对同一树层上的相同的值去重。要将
阅读更多2024-07-27
Redis的两种持久化方式---RDB、AOF
rdb其实就是一种快照持久化的方式，它会将Redis在某个时间点的所有的数据状态以二进制的方式保存到硬盘上的文件当中，它相对于aof文件会小很多，因为知识某个时间点的数据，当然，这就会导致它的实时性不
阅读更多2024-07-27

CSS特效---华为手机充电特效；兼容各大浏览器

1、演示

2、一切尽在代码中

相关文章