纯CSS的华为充电动画,它来了

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 Krpano专栏:想学Krpano的,冲

🔔 上述专栏,都在不定期持续更新中!!!!!!!!!!!!!

文章目录

✨ 关键点

✨ 效果演示

✨ 分析逻辑

 ✨ 下面附上完整代码


 

✨ 关键点

        拆解一下知识点,最主要的其实是用到了 filter: contrast() 以及 filter: blur() 这两个滤镜,可以很好的实现这种融合效果。

单独将两个滤镜拿出来,它们的作用分别是:

  • filter: blur() 给图像设置高斯模糊效果。
  • filter: contrast() 调整图像的对比度。

但是,当他们“合体”的时候,产生了奇妙的融合现象。

先来看一个简单的例子:

        仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。 

✨ 效果演示

✨ 分析逻辑

1、首先我们注意分析,这个效果到底需要怎样的结构去实现

        为了更好的看效果  我把所有的元素做了颜色区分,顶部其实就是两个圆利用border-radius去设置了圆角边框的弧度,下面呢?

        底部也是一个大圆,其中有很多很多个小圆,因为小圆要向上移动,实现效果,主要的代码如下:

@for $i from 0 through 15 { li:nth-child(#{$i}) {$width: 15 + random(15) + px;left: 15 + random(70) + px;top: 50%;transform: translate(-50%, -50%);width: $width;height: $width;animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;}
}
@keyframes moveToTop {90% {opacity: 1;}100% {opacity: .1;transform: translate(-50%, -180px);}
}

注意:

  1. CSS本身不支持@for循环,这是一种Sass/SCSS的语法

 ✨ 下面附上完整代码

HTML:

<div class="g-container"><div class="g-number">98.7%</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></ul></div>
</div>

SCSS

html,
body {width: 100%;height: 100%;display: flex;background: #000;overflow: hidden;
}
.g-number {position: absolute;width: 300px;top: 27%;text-align: center;font-size: 32px;z-index: 10;color: #fff;
}.g-container {position: relative;width: 300px;height: 400px;margin: auto;
}.g-contrast {filter: contrast(10) hue-rotate(0);width: 300px;height: 400px;background-color: #000;overflow: hidden;animation: hueRotate 10s infinite linear;
}.g-circle {position: relative;width: 300px;height: 300px;box-sizing: border-box;filter: blur(8px);&::after {content: "";position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%) rotate(0);width: 200px;height: 200px;background-color: #00ff6f;border-radius: 42% 38% 62% 49% / 45%;animation: rotate 10s infinite linear;}&::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-bubbles {position: absolute;left: 50%;bottom: 0;width: 100px;height: 40px;transform: translate(-50%, 0);border-radius: 100px 100px 0 0;background-color: #00ff6f;filter: blur(5px);
}li {position: absolute;border-radius: 50%;background: #00ff6f;
}@for $i from 0 through 15 { li:nth-child(#{$i}) {$width: 15 + random(15) + px;left: 15 + random(70) + px;top: 50%;transform: translate(-50%, -50%);width: $width;height: $width;animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;}
}@keyframes rotate {50% {border-radius: 45% / 42% 38% 58% 49%;}100% {transform: translate(-50%, -50%) rotate(720deg);}
}@keyframes moveToTop {90% {opacity: 1;}100% {opacity: .1;transform: translate(-50%, -180px);}
}@keyframes hueRotate {100% {filter: contrast(15) hue-rotate(360deg);}
}

注意注意注意:一定要用SCSS!!!!!!!!!!!!

注意注意注意:一定要用SCSS!!!!!!!!!!!!

注意注意注意:一定要用SCSS!!!!!!!!!!!!

我们改日再会

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

location常用属性和方法

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在在JavaScript中location常用属性和方法以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可…

MySql 第三方工具SQL Sugar

MySQL 是一个非常流行和强大的开源关系数据库管理系统。由于其开源性质&#xff0c;许多第三方工具和库被开发出来&#xff0c;以帮助用户更有效地使用 MySQL。这些第三方工具提供了各种功能&#xff0c;包括数据库管理、SQL 查询生成和优化、备份和恢复等。在这篇博客中&#…

vol----学习随记!!!

目录 一、代码生成1.先新建一个功能的对应的代码配置各项解释&#xff1a; 2.后设置配置菜单3.再点保存&#xff0c;生成vue页面&#xff0c;生成model&#xff0c;生成业务类4.再通过菜单设置编写系统菜单 一、代码生成 1.先新建一个功能的对应的代码配置 各项解释&#xff…

二手房交易流程及避坑指南

文章目录 一、写作目的二、主要流程1、查档2、签定金合同3、网签4、交首付5、解押过户6、出产证7、拿房款8、交房 一、写作目的 近几个月房价一直跌跌不休&#xff0c;对于投资客来说这段时间肯定不好过&#xff0c;但这段时间也正是置换房子的好时候&#xff0c;在这次的房产…

Go语言中支持的internal目录配置与组织内私网包配置详解

Go 中的内部包 这里可能会有歧义 可能是 Go 的 internal 目录中的包也可能是指内部开发的包 函数和变量的可见性 对于函数和变量而言&#xff0c;有如下规则&#xff1a;1 &#xff09;小写字母开头的函数变量结构体只能在本包内访问2 &#xff09;大写字母开头的函数变量结…

移动应用开发:揭秘内侧APP封装台的高效

在数字化浪席卷下&#xff0c;移应用已经成连接企业与用户纽带。为了抢占市场先机&#xff0c;快速发布高质量的移动应用成为业竞争的关键。侧APP封装平因此而诞生&#xff0c;成为了应开发者的得助手。以下是内侧APP封装台的全面解读&#xff0c;助在应用开发海洋中乘风破浪。…

基于CMake的大型C++工程组织

此文适合大型C工程&#xff0c;涉及到多个自定义库&#xff0c;多个第三方库&#xff0c;以及还有给第三方用户进行二次开发的需求下&#xff0c;应对这种复杂编译环境下的工程组织方式的一些经验介绍&#xff0c;希望给大型工业软件的开发者一些参考 一个大型工程&#xff0c…

【JavaFX】JDK11 基于Gson、hutool、Jackson持久化存储实体类数据的解决方案 (读取、追加、去重json对象)

文章目录 开发环境效果前言一、Gson是什么?二、使用步骤1.引入依赖2.创建实体类创建 JsonFileService类创建JsonFileService的实现类 JsonFileServiceImpl三、实现效果开发环境 JDK11IDEA 2023.3Gson、hutool、JacksonJavaFX 11效果 前言 使用JDK1

【每日一题】【12.29】 - 【12.31】年终收尾

&#x1f525;博客主页&#xff1a; A_SHOWY&#x1f3a5;系列专栏&#xff1a;力扣刷题总结录 数据结构 云计算 数字图像处理 力扣每日一题_ 这三天的题目难度相对较小&#xff0c;基本都为模拟题&#xff0c;但是第二三的题目年份贡献类型很有代表性。2023年最后三天年终收…

MongoDB 数据类型

目录 BSON 类型 二进制数据&#xff08;Binary Data&#xff09; ObjectId ObjectId定义 文档中的ObjectId ObjectId的单调性 字符串&#xff08;String&#xff09; 时间戳&#xff08;Timestamps&#xff09; 日期&#xff08;Date&#xff09; BSON类型的排序 数…

I/O多路复用

I/O就是对缓冲区的操作 I/O多路复用使得程序能同时监听多个文件描述符能够提高程序的性能 I/O多路复用是一种有效的处理多个I/O事件的机制&#xff0c;允许一个单独的进程或线程来监视多个文件描述符&#xff08;sockets、文件、设备等&#xff09;&#xff0c;并在其中任何一个…

Python编程技巧 – format格式化文本

Python编程技巧 – format格式化文本 Python Programming Essentials - Using format() to format texts By JacksonML 本文简要介绍Python语言的format()方法&#xff08;也即函数&#xff09;相关实例和技巧&#xff0c;希望对读者有所帮助。 1. format定义和方法 forma…

如何处理并下载Sentinel-5数据

SENTINEL-5是欧洲空间局&#xff08;European Space Agency&#xff0c;ESA&#xff09;Copernicus计划中的一颗地球观测卫星。SENTINEL-5的主要任务是监测大气成分&#xff0c;特别是臭氧、氮二氧化物、二氧化硫、甲烷和其他气体的分布。这些观测对于了解大气污染、气候变化和…

php接口优化 使用curl_multi_init批量请求

PHP使用CURL同时抓取多个URL地址 抓取多个URL地址是Web开发中常见的需求&#xff0c;使用PHP的curl库可以简化这个过程。本文将详细介绍如何使用PHP的curl库同时请求多个URL地址&#xff0c;并提供具体的代码案例和注释。 curl库介绍 curl是一个常用的开源网络传输工具&…

图像分割实战-系列教程5:unet医学细胞分割实战3(医学数据集、图像分割、语义分割、unet网络、代码逐行解读)

&#x1f341;&#x1f341;&#x1f341;图像分割实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 上篇内容&#xff1a; unet医学细胞分割实战2 下篇内容&#xff1a; unet医学细胞分割实战4 5、损…

《Linux详解:深入探讨计算机基础》

《Linux详解&#xff1a;深入探讨计算机基础》 引言&#xff1a; 在计算机科学领域&#xff0c;操作系统是一个至关重要的概念&#xff0c;而Linux作为一种开源的Unix-like操作系统&#xff0c;不仅在服务器领域广泛应用&#xff0c;也在嵌入式系统、超级计算机等多个领域发挥…

Hermite矩阵

Hermite矩阵 文章目录 Hermite矩阵一、正规矩阵【定义】A^H^矩阵【定理】 A^H^的运算性质【定义】正规矩阵、特殊的正规矩阵【定理】与正规矩阵酉相似的矩阵也是正规矩阵【定理】正规的上(下)三角矩阵必为对角矩阵【定义】复向量的内积【定理】Schmitt正交化 二、酉矩阵&#x…

dijkstra和prim算法

最初看严蔚敏老师的《数据结构》一书时&#xff0c;便感觉Dijkstra (读作[daik stra])和Prim这两个算法几乎一摸一样&#xff0c;后来看到李清勇老师的《算法设计与问题求解》一书中对两中算法的比较&#xff0c;才知道两种算法的异同点。 关于Dijkstra的念法&#xff0c;请看…

Wireshark-win64

前言 Wireshark是使用最广泛的一款「开源抓包软件」&#xff0c;常用来检测网络问题、攻击溯源、或者分析底层通信机制。 它使用WinPCAP作为接口&#xff0c;直接与网卡进行数据报文交换。 Wireshark-win64 前言1 下载地址2 安装 1 下载地址 https://download.csdn.net/down…

k8s搭建(五、k8s可视化管理工具Dashboard配置)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…