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

站长

2023年07月22日 19:00 · 阅读数 56

这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

大家好，我叫小杜杜，我们知道构成前端的三大语言有：html、css和js，其中 css的作用是页面的布局，美观，那么你知道只通过css就能实现非常炫酷的动画吗？

今天就一起来看看一个十分炫酷的特效：手机充电，整体特效可在最下方看到

前置知识：

要想完成这个特效，就必须要知道一些前置的属性，简单介绍一下吧：

animation

animation : 动画属性，可连贯的书写，也可分开书写(前面加上animation-)，如：

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):给图像应用色相旋转。给一定的旋角色环角

充电小球

我们先弄一个小球，让他从最底下，像上面移动，以此循环，在给小球设置其间隔时间即可

.contrast {
  span{
      animation: moveUp ease-in-out infinite;
      animation-duration: 4s;
      animation-delay: 2s;
  }
}
@keyframes moveUp {
  0% {
      bottom: 0;
  }

  100% {
      bottom: calc(100% - 265px);
  }
}

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

底坐

底座我们随便设置下就行，可以通过 border-radius属性两个角弄下

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

但我们发现如果这是这么弹出就会显得非常单调，感觉小球与底座并没有关联一般，这时后就需要一个效果：融合

融合效果

通过 filter 这个属性就能实现。在父元素添加：filter: contrast()，子元素添加filter:blur() 就可以轻松实现

这里将底座和小球都添加上，同时创建多个小球，在改动下小球的位置，间隔时间，速度就行了

 .contrast{
     filter: contrast(15) hue-rotate(0);
     span{
         filter: blur(5px);
     }
     .button{
         filter: blur(5px);
     }
 }

来看看效果:

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

环

首先我们需要做个正方形，并在中间弄个圆出来，中间的圆把背景色弄的跟整体的背景色就可以了，像这样：

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

之后我们在通过 border-radius来改变下框的圆角，再加入上 filter的效果，让其变得模糊，并且可以与小球形成融合效果，像这样：

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

最后通过设置一个动画，让其旋转起来就行了：

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

  100% {
      transform: rotate(360deg);
  }
}

效果：

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

加入颜色

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

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

  100% {
      filter: contrast(15) hue-rotate(360deg);
  }
}

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

详细代码

index.tsx

import React from 'react';

import './index.less'

const Index:React.FC<any> = ({app, dispatch})=> {

  return (
    <div className="Index">
      <div className="text">73%</div>
      <div className="contrast">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        {/* 底部的 */}
        <div className="circle"></div> 
        {/* 下面的 */}
        <div className="button"></div>
      </div>
    </div>
  );
}

export default Index;

index.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

参考

华为充电动画

不得不说css真的很神奇，最神秘的莫过于css，喜欢的点个赞👍🏻支持下吧(●￣(ｴ)￣●)

其他好文：

转载自:https://juejin.cn/post/7084863484227223583