充电水滴融合特效 html+css
先看效果:
前言:
这个思路是我在b站看up主Steven做的,觉得很不错,然后自己也弄了一个。(纯css)
实现:
- 定义标签,有三个水滴盒子,一个圆圈盒子显示数字,一个最底层盒子:
<div class="kuang"><div class="droplet"></div><div class="droplet"></div><div class="droplet"></div><div class="quan"></div><span>99%</span></div>
- 给最底层盒子基本的样式。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);}}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>北极光之夜。</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}.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);}.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;}.kuang div:nth-of-type(2){animation-delay: 1.5s;}.kuang div:nth-of-type(3){animation-delay: 2s;}@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);}}.quan{position: absolute;width: 100px;height: 100px;border-radius: 50%;background-color: rgb(61, 233, 99);filter: blur(20px);animation: zhuan 3s infinite;}@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);}}span{position: absolute;color: rgb(184, 182, 182);font-size: 26px;font-family: 'fangsong';font-weight: bold;}</style>
</head>
<body><div class="kuang"><div class="droplet"></div><div class="droplet"></div><div class="droplet"></div><div class="quan"></div><span>99%</span></div>
</body>
</html>
总结:
其它文章:
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
等等等…
充电水滴融合特效 html+css相关推荐
- html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...
- 多功能用途 Gooey Effects 7种炫酷HTML5 SVG液态水滴融合动画特效
查看原文 查看在线演示Demo和更多原文内容教程: 7种炫酷HTML5 SVG液态水滴融合动画特效 这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML ...
- 2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特效
2023年春节祝福第二弹 送你一只守护兔,让它温暖每一个你! [html5 css3]画一只会动的兔子 目录 一.送你一只守护兔,效果图 二.前言 三.代码解释及部分特效教程 (1).css3 立体字 ...
- 前端入门(雷云特效,css)
(推荐个别人写的css特效网站CSS3的奇思妙想,感觉有好多蛮好玩的功能,这个特效是在里面偏下面一点的位置) (最好还是看一下动画的演示效果,直接复制粘贴就行了) 实现原理其实很简单,三个部分,云层, ...
- web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- 小方块上升组成背景特效 html+css+js
一.先看效果: 1024程序员节发篇文章拿个个徽章,嘿嘿 (^▽ ^ ) . 二.详细实现(后面有完整代码): 1.先定义html标签,.container就是底层大盒子,.item就是一个小方块,后 ...
- 文字折叠特效 html+css
效果: 实现: 1. 定义标签: <h1>aurora</h1> 2. 设置文字基本样式: h1{text-transform: uppercase;letter-spacin ...
- SVG绘制文字特效 html+css
效果(源码在最后): 实现: 定义基本标签,main是底层盒子,text是文本,SVG标签用法看这里: <main><svg width="500" height ...
- canvas之-------水滴扩散特效
// 水滴扩散特效 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- DNA旋转特效 html+css
效果: 实现: 1. 首先讲css的var()函数 * : 定义: 随着sass,less预编译的流行,css也随即推出了变量定义var函数.var()函数,就如同sass和less等预编译软件一样, ...
最新文章
- HDU 1596 find the safest road (Floyd)
- Google发布机器学习术语表 (中英对照)
- Win7重启后IP地址无效
- 文件存取方式是哪两种python_常用的Python存储方式有哪些?
- 台积电:如果不能向华为销售芯片,其他订单可快速取代华为空缺
- _tkinter.TclError: invalid command name “tixComboBox“ 的解决办法
- mysql汉字转拼音首字母报错_MySQL 汉字转拼音
- Java快递物流运输管理系统源码
- 一个月可以学会单片机嘛?单片机编程学多久?
- Codeforces718 C. Sasha and Array(线段树维护矩阵,矩阵快速幂求斐波那契数列,矩阵乘法结合律)
- 猜数游戏是一个益智类小游戏,游戏运行产生一个1-100之间的随机数,让玩家重复猜测,直到猜对为止。(扩展条件:如果猜测超出三次提示“游戏失败”)
- 战胜拖延症的利器—Product Backlog
- N1刷入Armbian(Debian11 bullseye)笔记
- 高等数学:第五章 定积分(2) 定积分的性质、中值定理
- addobe dwcs6静态表格
- .NET Reflector 7.6.1.824安装及破解(刚试了,绝对能用)
- 数据库 内联左联右联 INNER JOIN、LEFT JOIN和RIGHT JOIN
- Java程序员推荐书目
- 用python做模型_Python实现Kuramoto模型的思想前提
- foxmail打开乱码问题