--- theme: condensed-night-purple --- 这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，[点击查看活动详情](https://juejin.cn/post/7080800226365145118)。大家好，我叫小杜杜，我们知道构成前端的三大语言有：`html`、`css`和`js`，其中 **css**的作用是页面的布局，美观，那么你知道只通过`css`就能实现非常炫酷的动画吗？今天就一起来看看一个十分炫酷的特效：**手机充电**，整体特效可在最下方看到 ## 前置知识：要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧： ### animation **animation** : 动画属性，可连贯的书写，也可分开书写(前面加上`animation-`)，如： ```css animation: name duration timing-function delay iteration-count direction fill-mode play-state; ``` - **name**: 绑定到选择器的关键帧的名称 - **duration**: 动画指定需要多少秒或毫秒完成 - **timing-function**: 设置动画将如何完成一个周期 - **delay**: 设置动画在启动前的延迟间隔。 - **iteration-count**: 定义动画的播放次数。 - **direction**: 指定是否应该轮流反向播放动画。 - **fill-mode**: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 - **play-state**: 指定动画是否正在运行或已暂停。其中：**name** 需要调用 **@keyframes** 来自定义名称，可设置 0% ～ 100% 时的样子 ### transform **transform**：用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 - `translate(x, y)`：定义2d图形的转换，分别为 x 和 y - `roate(90deg)`: 定义2d图形的旋转，参数为度数，如旋转90度 ### filter **filter**: 滤镜属性，可以让事物变得模糊 - `blur(5px)`:给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊； - `contrast(%)`:调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 - `hue-rotate(deg)`:给图像应用色相旋转。给一定的旋角色环角 ## 充电小球我们先弄一个小球，让他从最底下，像上面移动，以此循环，在给小球设置其间隔时间即可 ```css .contrast { span{ animation: moveUp ease-in-out infinite; animation-duration: 4s; animation-delay: 2s; } } @keyframes moveUp { 0% { bottom: 0; } 100% { bottom: calc(100% - 265px); } } ``` ![img1.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5bf13bfe343a426f845465d97607a666~tplv-k3u1fbpfcp-watermark.image?) ## 底坐底座我们随便设置下就行，可以通过 `border-radius`属性两个角弄下 ![img2.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8162926744d490d970059d533f17b13~tplv-k3u1fbpfcp-watermark.image?) 但我们发现如果这是这么弹出就会显得非常单调，感觉小球与底座并没有关联一般，这时后就需要一个效果：**融合** ### 融合效果通过 **filter** 这个属性就能实现。在父元素添加：**filter: contrast()**，子元素添加**filter:blur()** 就可以轻松实现这里将底座和小球都添加上，同时创建多个小球，在改动下小球的位置，间隔时间，速度就行了 ```css .contrast{ filter: contrast(15) hue-rotate(0); span{ filter: blur(5px); } .button{ filter: blur(5px); } } ``` 来看看效果: ![img4.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e7673aab85742dd8ca216eeae697980~tplv-k3u1fbpfcp-watermark.image?) ## 环首先我们需要做个正方形，并在中间弄个圆出来，中间的圆把背景色弄的跟整体的背景色就可以了，像这样： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4a3547974dc4be480af0e8a0b55f2ba~tplv-k3u1fbpfcp-watermark.image?) 之后我们在通过 `border-radius`来改变下框的圆角，再加入上 `filter`的效果，让其变得模糊，并且可以与小球形成融合效果，像这样： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f8f52a4f62e4f97af8b31ab0d7d99ac~tplv-k3u1fbpfcp-watermark.image?) 最后通过设置一个动画，让其旋转起来就行了： ```css .circle { box-sizing: border-box; filter: blur(8px); animation: circleRotate 6s linear infinite; } @keyframes circleRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 效果： ![img5.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/850139ea70c0425ea773674b7ee7fb7c~tplv-k3u1fbpfcp-watermark.image?) ## 加入颜色我们为了好看，还可以加入颜色的控制，在把对应的文字移入到圈中，效果就完成了 ```css .contrast{ animation: hueRotate 6s linear infinite; } @keyframes hueRotate { 0% { filter: contrast(15) hue-rotate(0); } 100% { filter: contrast(15) hue-rotate(360deg); } } ``` ![充电.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83ec691dc21c462499480078ce23b075~tplv-k3u1fbpfcp-watermark.image?) ## 详细代码 - index.tsx ```tsx import React from 'react'; import './index.less' const Index:React.FC = ({app, dispatch})=> { return (

73%

{/* 底部的 */}

{/* 下面的 */}

); } export default Index; ``` - index.less ```less .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 ### 参考 [华为充电动画](https://csscoco.com/inspiration/#/./others/others-huawei-charging?id=%e5%8d%8e%e4%b8%ba%e5%85%85%e7%94%b5%e5%8a%a8%e7%94%bb) 不得不说`css`真的很神奇，最神秘的莫过于`css`，喜欢的点个赞👍🏻支持下吧(●￣(ｴ)￣●) 其他好文： - [女朋友都喜欢的css特效：电池充电（水波纹特效）](https://juejin.cn/post/7086845744589570062) - [女朋友都喜欢的css特效：空间穿梭](https://juejin.cn/post/7086037953595572232)