教你用前端制作fashion充电水滴融合特效

今天云南仟龙Mark带大家学学前端制作fashion充电水滴融合特效，编码简单易懂，对我们的学习培训或工作中具备一定的参考借鉴使用价值，需要的小伙伴们跟我一起gogogo!

前言：
这个思路是我在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);给图像设置模糊。

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

html css完成充电水滴融合特效代码_html_02

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

1
.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;http://www.qlyl1688.com/helps/dljx8903.htmlbackground-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>

总结：
到此这篇用前端制作fashion充电水滴融合特效文章就到这了，来源脚本之家，下次见！！

教你用前端制作fashion充电水滴融合特效相关推荐

php制作特效文字,Photoshop制作漂亮的水滴字特效
本教程主要使用Photoshop制作漂亮的水滴字特效,在制作过程中我们将学习一些PS技巧.比如选取的应用.图层混合.图层调整以及一点蒙板技巧.应该说这是一个初级水平的教程.大家一起来吧. 先放上效果图 ...
python开发rpa_几步教你用 Python 制作一个 RPA 机器人！
原标题:几步教你用 Python 制作一个 RPA 机器人! 作者 | 阿文出品 | CSDN(ID:CSDNnews) 头图 | CSDN下载自东方IC 繁琐且重复的工作在我们日常的工作中,有很 ...
教你Java5分钟制作海报、彻底解决APP兼容性问题
教你Java5分钟制作海报.彻底解决APP兼容性问题一.需求背景我们经常在多终端应用开发中会遇到这样的需求:用户在浏览商品时觉得不错,希望分享给朋友.此时终端(安卓.苹果.H5等)生成一张精美 ...
HTML、CSS——制作手机充电特效
HTML.CSS--制作手机充电特效尽管前端学习的第一阶段已经结束,接下了要全速开启js,vue,react阶段,练习CSS的次数必然会减少,现在还是能多练一点就多练一点今天带来是是用CSS制作手 ...
怎么用python自制计算公式_手把手教你用python制作简易计算器，能够记录你使用的情况...
话不多说,首先先看效果图,它能够记录你在使用过程中的历史,方便你查看是否有错: 接下来就仔细分析一下是如何制作的: 简易计算器第一步:导入资源库在过程中使用到了tkinter这个资源库,win+R ...
手把手教你使用VS制作winform安装包
手把手教你使用VS制作winform安装包使用VS 自带的打包工具,制作winform安装项目开发环境:VS 2008 Access 操作系统:Windows XP 开发语言:C# 项目名称:** ...
教你用python制作人脸卡通画（附源码）
教你用python制作人脸卡通画(附源码) 效果展示: 让我们开始学习之路: 原理:利用第三方人脸接口将图像人脸化第三方接口注册地址:https://ai.minivision.cn/#/login ...
android 壁纸制作教程,教你如何自己制作安卓手机壁纸的方法教程
谷歌的Android手机操作系统正在迅速成为最流行的手机平台之一.这是非常容易自定义的,包括更改墙纸,只是可自定义的其中一部分. 这篇文章可以教你如何DIY制作属于自己的手机壁纸,下面直接进入主题. ...
keyshot渲染图文教程_keyshot基础图文教程，手把手教你用keyshot制作动画效果
keyshot基础图文教程,手把手教你用keyshot制作动画效果你知道么?keyshot除了用来渲染产品,其实还可以制作动画效果的,它里面内置了好几种运动方式,利用keyshot的旋转,平移,缩小 ...
表单－微信小程序前端制作切片演示
小程序前端制作-表单切片,内含服务器端.小程序所有文件.切片文件(可以用小程序切片软件打开再次编辑).效果图内含以下栏目: 新增校园经历组织/公司名称职位开始时间结束时间经历描述资源下载 ...

教你用前端制作fashion充电水滴融合特效

教你用前端制作fashion充电水滴融合特效相关推荐

最新文章

热门文章