您现在的位置是：网站首页> 编程资料编程资料

html+css实现充电水滴融合特效代码html+css实现图片扫描仪特效 html+css实现血轮眼轮回眼特效代码

2023-10-08 469人已围观

简介这篇文章主要介绍了html+css实现充电水滴融合特效代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言：

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

实现：

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

99%

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

 .kuang{ position: relative; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgb(5,5,5); filter: contrast(30); }

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

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

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

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

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

在这里插入图片描述

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

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

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

 @keyframes fall{ 0%{ opacity: 0; transform: scale(0.8) translateY(-500%); } 50%{ opacity: 1; transform: scale(0.5) translateY(-100%) ; } 100%{ transform: scale(0.3) translateY(0px); } }

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

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

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

 @keyframes zhuan{ 0%{ transform: scale(1) rotate(0deg); } 50%{ transform: scale(1.1) rotate(180deg); height: 90px; border-top-left-radius: 45%; border-bottom-left-radius: 48%; } 100%{ transform:scale(1) rotate(360deg); } }

完整代码：

北极光之夜。
99%

总结：

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

上一篇：在HTML中限制input 输入框只能输入纯数字的实现纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果

下一篇：html解决table设置宽度无效的问题HTML页面自适应宽度的table(表格)固定 table宽度 table-layout: fixed表格设置table-layout:fixed后对单元格宽度设置无效html中table为每个单元格设置不同颜色和宽度设置table中的宽度不随文字改变让其固定td 内容自动换行 table表格td设置宽度后文字太多自动换行html table呈现个人简历以及单元格宽度失效的问题解决

您现在的位置是：网站首页> 编程资料编程资料

html+css实现充电水滴融合特效代码html+css实现图片扫描仪特效 html+css实现血轮眼轮回眼特效代码

目录

前言：

实现：

总结：

相关内容

点击排行

本栏推荐

猜你喜欢