CSS+HTML<手机充电黏黏球效果>
2020-01-15 本文已影响0人
誰在花里胡哨
效果图：
ball.gif
🎈如果想单纯的实现这种效果，其实使用CSS中的对比度和模糊度就能实现(效果不佳)🙃
点击查看参考地址
filter: contrast(20); //对比度
filter: blur(10px); //模糊度
🎈此处有用到svg滤镜效果，同等与以上效果(推荐使用) 👍
点击此处查看简单用法
🎈这篇文章有一个比较生的css属性 mask,主要用于圆形剪切用，不太懂得可自行百度，用处不是太大。
/* 从中心向外剪切圆，相当于掏空 */
-webkit-mask: radial-gradient(transparent 95px, white 0px);
🎈在css中有设置全局配色,可通过此处直接改变主题色
/* 全局配色 */
--c: rgb(47, 224, 100);
image.png
效果亲测有效 👍，电脑端和移动端完美运行，绝对流畅 ~~~~~ 🎐🎐🎐🎐
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
/* 全局配色 */
--c: rgb(47, 224, 100);
}
#box {
width: 300px;
height: 600px;
position: relative;
/* 背景色 */
/* background: #f7f6f6; */
overflow: hidden;
padding: 50px 0;
box-sizing: border-box;
;
}
.box {
width: 100%;
height: 100%;
position: absolute;
display: flex;
justify-content: center;
/* 此处尽量不要设置背景色,可以选择在父标签上设置背景色，否则没有黏黏的效果 */
filter: url("#goo");
}
/* 电量文字 */
.text {
font-weight: 200;
font-size: 30px;
margin-top: 100px;
}
/* 电量文字 */
.text span {
font-size: 15px;
}
/* 顶部的两个旋转小球 */
.top_ball {
width: 200px;
height: 200px;
border-radius: 35%;
opacity: 0.5;
position: absolute;
top: 20px;
z-index: 10;
/* 从中心向外剪切圆，相当于掏空 */
-webkit-mask: radial-gradient(transparent 95px, white 0px);
}
/* 顶部的两个旋转小球 */
.top_ball.one {
background: var(--c);
animation: ballZhuan 5s linear infinite;
}
/* 顶部的两个旋转小球 */
.top_ball.two {
background: var(--c);
animation: ballZhuan 8s linear infinite;
}
@keyframes ballZhuan {
100% {
transform: rotate(360deg);
}
}
/* 底部的小球 */
.dot {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--c);
position: absolute;
z-index: -1;
bottom: -50px;
}
.dot:nth-of-type(1) {
width: 40px;
height: 40px;
right: 100px;
animation: dotMove 5s linear infinite;
}
.dot:nth-of-type(2) {
width: 50px;
height: 50px;
left: 100px;
animation: dotMove 6s linear infinite;
}
.dot:nth-of-type(3) {
animation: dotMove 3s linear infinite;
}
.dot:nth-of-type(4) {
width: 15px;
height: 15px;
left: 100px;
animation: dotMove 2s linear infinite;
}
.dot:nth-of-type(5) {
width: 30px;
height: 30px;
animation: dotMove 4s linear infinite;
}
@keyframes dotMove {
0% {
transform: translateY(0px);
opacity: 1;
}
98% {
opacity: 1;
}
100% {
transform: translateY(-410px);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="box">
<div class="box">
<div class="text">99<span>%</span></div>
<div class="top_ball one"></div>
<div class="top_ball two"></div>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<svg style="width: 0; height: 0;">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2"
result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feBlend in2="shadow" in="goo" result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo" />
<feBlend in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
</body>
</html>
