女朋友都喜欢的css特效：手机充电 _前置

今天就一起来看看一个十分炫酷的特效：手机充电，整体特效可在最下方看到
前置知识：
要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧：
: 动画属性，可连贯的书写，也可分开书写(前面加上-)，如：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
其中：name 需要调用 @ 来自定义名称，可设置 0% ～ 100% 时的样子
：用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
: 滤镜属性，可以让事物变得模糊
充电小球
我们先弄一个小球，让他从最底下，像上面移动，以此循环，在给小球设置其间隔时间即可
.contrast {span{animation: moveUp ease-in-out infinite;animation-duration: 4s;animation-delay: 2s;}}@keyframes moveUp {0% {bottom: 0;}100% {bottom: calc(100% - 265px);}}
底坐
底座我们随便设置下就行，可以通过 -属性两个角弄下
但我们发现如果这是这么弹出就会显得非常单调，感觉小球与底座并没有关联一般，这时后就需要一个效果：融合
融合效果
通过这个属性就能实现。在父元素添加：: ()，子元素添加:blur() 就可以轻松实现

文章插图

文章插图
这里将底座和小球都添加上，同时创建多个小球，在改动下小球的位置css规则定义滤镜图文详解，间隔时间css规则定义滤镜图文详解，速度就行了
.contrast{filter: contrast(15) hue-rotate(0);span{filter: blur(5px);}.button{filter: blur(5px);} }
来看看效果:
环
首先我们需要做个正方形，并在中间弄个圆出来，中间的圆把背景色弄的跟整体的北京市就可以了，像这样：
之后我们在通过 -来改变下框的圆角，再加入上的效果，让其变得模糊，并且可以与小球形成融合效果，像这样：
最后通过设置一个动画，让其旋转起来就行了：

.circle {box-sizing: border-box;filter: blur(8px);animation: circleRotate 6s linear infinite;}@keyframes circleRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

效果：
加入颜色
我们为了好看，还可以价格颜色的控制，在把对应的文字移入到圈中，效果就完成了

.contrast{animation: hueRotate 6s linear infinite;}@keyframes hueRotate {0% {filter: contrast(15) hue-rotate(0);}100% {filter: contrast(15) hue-rotate(360deg);}}

详细代码

import React from 'react';import './index.less'const Index:React.FC = ({app, dispatch})=> {return (73%{/* 底部的 */}{/* 下面的 */});}export default Index;

.Index {width: 100vw;height: 100vh;background: #000;position: relative;.text{width: 200px;height: 200px;text-align: center;z-index: 9;font-size: 30px;line-height: 200px;color: white;position: absolute;left: 50%;top: 10%;transform: translate(-50%, 0%);}.contrast{width: 100%;height: 100%;background-color: #000;overflow: hidden;filter: contrast(15) hue-rotate(0);position: relative;animation: hueRotate 6s linear infinite;span{background: #00ff6f;position: absolute;bottom: 0;border-radius: 100px 100px 0 0;filter: blur(5px);animation: moveUp ease-in-out infinite;&:nth-child(1) {width: 20px;height: 20px;left: 50%;animation-duration: 4s;animation-delay: 2s;}&:nth-child(2) {width: 22px;height: 22px;left: 54%;animation-duration: 4.2s;animation-delay: 4s;}&:nth-child(3) {width: 24px;height: 24px;left: 45%;animation-duration: 3s;animation-delay: 1s;}&:nth-child(4) {width: 20px;height: 22px;left: 54%;animation-duration: 5s;animation-delay: 0s;}&:nth-child(5) {width: 22px;height: 22px;left: 52%;animation-duration: 3.5s;animation-delay: 5s;}&:nth-child(6) {width: 20px;height: 20px;left: 50%;animation-duration: 4.7s;animation-delay: 1.2s;}&:nth-child(7) {width: 22px;height: 22px;left: 54%;animation-duration: 2.5s;animation-delay: 3.5s;}&:nth-child(8) {width: 24px;height: 24px;left: 51%;animation-duration: 5.6s;animation-delay: 4.2s;}&:nth-child(9) {width: 26px;height: 26px;left: 42%;animation-duration: 5.2s;animation-delay: 4s;}&:nth-child(10) {width: 26px;height: 22px;left: 54%;animation-duration: 3.8s;animation-delay: 4.3s;}&:nth-child(11) {width: 22px;height: 22px;left: 42%;animation-duration: 4.2s;animation-delay: 0.3s;}&:nth-child(12) {width: 24px;height: 24px;left: 46%;animation-duration: 4.6s;animation-delay: 2.0s;}&:nth-child(13) {width: 22px;height: 22px;left: 48%;animation-duration: 3.8s;animation-delay: 3.2s;}&:nth-child(14) {width: 26px;height: 22px;left: 55%;animation-duration: 5.2s;animation-delay: 2.9s;}&:nth-child(15) {width: 26px;height: 22px;left: 52%;animation-duration: 4.9s;animation-delay: 4.2s;}}.button {width: 150px;height: 50px;background: #00ff6f;position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 0);border-radius: 100px 100px 0 0;filter: blur(5px);}}.circle {width: 300px;height: 300px;position: absolute;top: 10px;left: 50%;margin-left: -150px;box-sizing: border-box;filter: blur(8px);animation: circleRotate 6s linear infinite;&::before{content: "";height: 200px;width: 200px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(0);background: #00ff6f;border-radius: 42% 38% 62% 49% / 45%;}&::after {content: "";width: 176px;height: 178px;background: #000;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}}}@keyframes hueRotate {0% {filter: contrast(15) hue-rotate(0);}100% {filter: contrast(15) hue-rotate(360deg);}}@keyframes circleRotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes moveUp {0% {bottom: 0;}100% {bottom: calc(100% - 265px);}}

End
不得不说css真的很神奇，效果就如真的一般，喜欢的点个赞支持下吧(●￣(?)￣●)
【女朋友都喜欢的css特效：手机充电】本文到此结束，希望对大家有所帮助。