经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
html+css实现充电水滴融合特效代码_HTML/Xhtml
来源：jb51　　时间：2021/2/1 11:31:35　　对本文有异议

先看效果：

在这里插入图片描述

前言：

这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css）

实现：

定义标签，有三个水滴盒子，一个圆圈盒子显示数字，一个最底层盒子：

  1. <div class="kuang">
  2.       <div class="droplet"></div>
  3.       <div class="droplet"></div>
  4.       <div class="droplet"></div>
  5.       <div class="quan"></div>
  6.       <span>99%</span>
  7.    </div>

给最底层盒子基本的样式。flex布局，这样3个水滴暂时会垂直居中排列。

  1. .kuang{
  2.             position: relative;
  3.             height: 100vh;
  4.             display: flex;
  5.             flex-direction: column;
  6.             justify-content: center;
  7.             align-items: center;
  8.             background-color: rgb(5,5,5);
  9.             filter: contrast(30);
  10.         }

filter: contrast(30);调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

水滴的基本样式。绝对定位，这样3个盒子会重叠一起。

  1. .droplet{
  2.            position: absolute;
  3.             width: 100px;
  4.             height: 100px;
  5.             border-radius: 50%;
  6.             background-color: rgb(61, 233, 99);
  7.             filter: blur(20px);
  8.             animation: fall 3s linear infinite;
  9.             opacity: 0;
  10.         }

filter: blur(20px);给图像设置模糊。

重点：我们给水滴盒子模糊度，这然三个水滴盒子会呈现一种模糊的状态。继而，我们给底层盒子设置图像对比度，这样模糊的图片会重新绘制轮廓，而得到下面的效果：

在这里插入图片描述

给要显示数字的圆圈基本样式。记住也要设置模糊度。这样在图像对比度下才会有与下落的水滴有融合的效果。

  1. .quan{
  2.             position: absolute;
  3.             width: 100px;
  4.             height: 100px;
  5.             border-radius: 50%;
  6.             background-color: rgb(61, 233, 99);
  7.             filter: blur(20px);
  8.             animation: zhuan 3s  infinite;
  9.         }

给水滴设置动画，让它们从上往下落下，期间大小发生变化，这些可以自己慢慢调试，设置成自己认为最好的效果。

  1.  @keyframes fall{
  2.             0%{
  3.                 opacity: 0;
  4.                 transform:  scale(0.8) translateY(-500%);               
  5.             }
  6.             50%{
  7.                 opacity: 1;
  8.                 transform: scale(0.5) translateY(-100%) ;
  9.             }
  10.             100%{
  11.                    transform: scale(0.3) translateY(0px);
  12.             }
  13.         }

第2和和第3个水滴延迟时间后再播放动画，这样3个水滴才会分开下落，至于几秒可以自己慢慢调试，设置成自己认为最好的效果。

  1. .kuang div:nth-of-type(2){
  2.             animation-delay: 1.5s;
  3.         }
  4.         .kuang div:nth-of-type(3){
  5.             animation-delay: 2s;
  6.         }

给显示数字的圆圈动画效果，让它转起来。期间可以让它大小或角度发生或其它变化，具体数值可以自己慢慢调试，设置成自己认为最好的效果。

  1. @keyframes zhuan{
  2.             0%{
  3.               transform: scale(1) rotate(0deg);
  4.             }
  5.             50%{
  6.                 transform: scale(1.1) rotate(180deg);
  7.                 height: 90px;
  8.                 border-top-left-radius: 45%;
  9.                 border-bottom-left-radius: 48%;
  10.  
  11.             }
  12.             100%{
  13.                 transform:scale(1) rotate(360deg);
  14.             }
  15.         }

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>北极光之夜。</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         .kuang{
  14.             position: relative;
  15.             height: 100vh;
  16.             display: flex;
  17.             flex-direction: column;
  18.             justify-content: center;
  19.             align-items: center;
  20.             background-color: rgb(5,5,5);
  21.             filter: contrast(30);
  22.         }
  23.         .droplet{
  24.            position: absolute;
  25.             width: 100px;
  26.             height: 100px;
  27.             border-radius: 50%;
  28.             background-color: rgb(61, 233, 99);
  29.             filter: blur(20px);
  30.             animation: fall 3s linear infinite;
  31.             opacity: 0;
  32.         }
  33.         .kuang div:nth-of-type(2){
  34.             animation-delay: 1.5s;
  35.         }
  36.         .kuang div:nth-of-type(3){
  37.             animation-delay: 2s;
  38.         }
  39.         @keyframes fall{
  40.             0%{
  41.                 opacity: 0;
  42.                 transform:  scale(0.8) translateY(-500%);               
  43.             }
  44.             50%{
  45.                 opacity: 1;
  46.                 transform: scale(0.5) translateY(-100%) ;
  47.             }
  48.             100%{
  49.                    transform: scale(0.3) translateY(0px);
  50.             }
  51.         }
  52.         .quan{
  53.             position: absolute;
  54.             width: 100px;
  55.             height: 100px;
  56.             border-radius: 50%;
  57.             background-color: rgb(61, 233, 99);
  58.             filter: blur(20px);
  59.             animation: zhuan 3s  infinite;
  60.         }
  61.         @keyframes zhuan{
  62.             0%{
  63.               transform: scale(1) rotate(0deg);
  64.             }
  65.             50%{
  66.                 transform: scale(1.1) rotate(180deg);
  67.                 height: 90px;
  68.                 border-top-left-radius: 45%;
  69.                 border-bottom-left-radius: 48%;
  70.  
  71.             }
  72.             100%{
  73.                 transform:scale(1) rotate(360deg);
  74.             }
  75.         }
  76.       span{
  77.           position: absolute;
  78.           color: rgb(184, 182, 182);
  79.           font-size: 26px;
  80.           font-family: 'fangsong';
  81.           font-weight: bold;
  82.       }
  83.     </style>
  84. </head>
  85. <body>
  86.     <div class="kuang">
  87.       <div class="droplet"></div>
  88.       <div class="droplet"></div>
  89.       <div class="droplet"></div>
  90.       <div class="quan"></div>
  91.       <span>99%</span>
  92.    </div>
  93. </body>
  94. </html>

总结：

到此这篇关于html+css实现充电水滴融合特效代码的文章就介绍到这了,更多相关html 水滴融合内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号