html充电中效果图,CSS+HTML<手机充电黏黏球效果>

最新推荐文章于 2024-08-16 12:52:43 发布

Ke Shi

最新推荐文章于 2024-08-16 12:52:43 发布

阅读量300

点赞数

文章标签： html充电中效果图

本文介绍如何利用CSS的滤镜效果和SVG来创建动态的电量显示效果，包括旋转小球和底部小点的动画。通过设置全局颜色变量，可以轻松改变主题色。同时，使用了对比度和模糊度滤镜，以及CSS的mask属性来实现特定的视觉效果。代码示例详细展示了实现这一效果的具体步骤和关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

e6f8dace99ed

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);

e6f8dace99ed

image.png

效果亲测有效 👍，电脑端和移动端完美运行，绝对流畅 ~~~~~ 🎐🎐🎐🎐

代码如下：

Document

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;

}

99%

result="goo" />

result="shadow" />

result="goo" />