超级炫酷的手机充电特效

效果如下：
html
HTML代码如下：

<div class="box"><div class="number">95.2%</div><div class="contrast"><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><span class="bubble"></span><div class="bubble-home"></div><div class="circle"></div></div></div>

css代码如下：

* {padding: 0;margin: 0;
}.box {width: 800px;height: 800px;background: #000;margin: 20px auto;padding-top: 20px;
}
.number{width: 200px;height: 200px;text-align: center;line-height: 200px;color:#fff;position: absolute;top:9%;left:50%;margin-left: -100px;z-index: 9;font-size: 30px;
}
.contrast {width: 100%;height: 100%;background: #000;position: relative;filter: contrast(15);animation: hueRotate 5s linear infinite;
}@keyframes hueRotate {0% {filter: contrast(15) hue-rotate(0);}100% {filter: contrast(15) hue-rotate(360deg);}
}.circle {width: 300px;height: 300px;position: absolute;left: 50%;top: 0;margin-left: -150px;filter: blur(8px);animation: cirleRotate 5s linear infinite;
}.circle::before {content: "";width: 200px;height: 200px;background: #00ff6f;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 42% 38% 62% 49% / 40%;
}.circle::after {content: "";width: 176px;height: 178px;background: #000;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 50%;}
@keyframes cirleRotate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
.bubble-home{width: 150px;height: 50px;background: #00FF6F;position: absolute;bottom: 0;left: 50%;margin-left: -75px;border-radius: 150px 150px 0 0;filter:blur(8px);
}
.bubble{width: 20px;height: 20px;background: #00FF6F;border-radius: 100%;position: absolute;left: 50%;bottom: 0;transform: translate(-50%,0);z-index: 100;animation: bubbleMoveUp  ease-in-out infinite;filter:blur(5px);
}
.bubble:nth-child(1){width: 20px;height: 20px;left: 50%;animation-duration: 5s;animation-delay: 1s;
}
.bubble:nth-child(2){width: 22px;height: 22px;left: 50%;animation-duration: 4s;animation-delay: 1.2s;
}.bubble:nth-child(3){width: 24px;height: 24px;left: 42%;animation-duration: 1.8s;animation-delay: 1.2s;
}.bubble:nth-child(4){width: 22px;height: 22px;left: 45%;animation-duration: 3.5s;animation-delay: 1.6s;
}.bubble:nth-child(5){width: 24px;height: 24px;left: 48%;animation-duration: 4.2s;animation-delay: 1.8s;
}.bubble:nth-child(6){width: 18px;height: 20px;left: 49%;animation-duration: 5.2s;animation-delay: 1.4s;
}.bubble:nth-child(7){width: 26px;height: 24px;left: 43%;animation-duration: 4.8s;animation-delay: 1.7s;
}.bubble:nth-child(8){width: 22px;height: 22px;left: 52%;animation-duration: 3.5s;animation-delay: 1.4s;
}.bubble:nth-child(9){width: 20px;height: 20px;left: 46%;animation-duration: 3.0s;animation-delay: 1.5s;
}.bubble:nth-child(10){width: 20px;height: 20px;left: 53%;animation-duration: 4.2s;animation-delay: 2.0s;
}.bubble:nth-child(11){width: 26px;height: 20px;left: 42%;animation-duration: 4.6s;animation-delay: 1.2s;
}.bubble:nth-child(12){width: 24px;height: 24px;left: 50%;animation-duration: 5.0s;animation-delay: 3.5s;
}
.bubble:nth-child(13){width: 22px;height: 22px;left: 50%;animation-duration: 4.2s;animation-delay: 4.0s;
}.bubble:nth-child(14){width: 24px;height: 22px;left: 42%;animation-duration: 3.5s;animation-delay: 3.6s;
}.bubble:nth-child(15){width: 20px;height: 20px;left: 45%;animation-duration: 5.2s;animation-delay: 3.7s;
}
.bubble:nth-child(16){width: 22px;height: 22px;left: 49%;animation-duration: 5.2s;animation-delay:1s;
}
.bubble:nth-child(17){width: 22px;height: 20px;left: 55%;animation-duration: 4.5s;animation-delay: 3.8s;
}
@keyframes bubbleMoveUp{0%{bottom: 0;}100%{bottom: calc(100% - 260px);}
}

超级炫酷的手机充电特效相关推荐

android 炫酷时间轴,这38款超级炫酷的时间轴特效代码案例，总有一款是你需要的...
最近,看到一些很漂亮的时间轴图表,效果真的非常不错.这些图表,写到需要的项目中,也是非常棒的.当然,你也可以拿它来当作学习的小练习.时间轴,在很多企业官网或者关于企业历史大事件介绍的时候,使用的频率还 ...
超级炫酷夜场酒吧KTV宣传视频模板镂空文字故障闪屏特效PR模板
超级炫酷夜场酒吧KTV宣传视频模板镂空文字故障闪屏特效PR模板超级时尚炫酷Premiere夜场酒吧KTV宣传视频模板,具有动态场景,频闪效果和原始过渡.该模板具有9个媒体占位符,8个可编辑文本层和 ...
【AE转场】1600+超级炫酷视频转场无缝过渡AE特效素材 V2.0
这是一款多用途的超级这是一款多用途的超级炫酷视频转场无缝过渡AE特效模板素材下载可以使用动态链接 After Effects 与 Adobe Premiere Pro 一起使用.还包括有关 ...
炫酷星空个人主页动态特效引导页面浏览器源码手机自适应引导页HTML
炫酷星空个人主页动态特效引导页面浏览器源码手机自适应引导页HTML 效果: 完整版链接: https://pan.baidu.com/s/1DbGaiqB5-29uoVbPK0fxCw 提取码: ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
Unity 之 ShaderGraph 实现超级炫酷的溶解效果入门级教程
Unity 之 ShaderGraph 实现超级炫酷的溶解效果入门级教程前言一,效果展示二,原理介绍三,实现效果四,使用示例五,完整图示前言若你的工程还没有进行基础配置,请查看我的博文 ...
4款神奇的黑科技网站，超级炫酷！各个都各显神通！
今天小编向大家推荐的这4款网站各个都是黑科技哦,千万不要错过了! I Remember http://i-remember.fr/en 4款神奇的黑科技网站,超级炫酷!各个都各显神通! 这款网站设计的 ...
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效.该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效. 使用方法 HTML结构 CSS样式 body { background ...

超级炫酷的手机充电特效

超级炫酷的手机充电特效

超级炫酷的手机充电特效相关推荐

最新文章

热门文章