手机充电css特效

 

1.充电小球

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

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

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

2.底座

底座我们随便设置下就行，可以通过 border-radius属性两个角弄下，但我们发现如果这是这么弹出就会显得非常单调，感觉小球与底座并没有关联一般，这时后就需要一个融合效果。

3.融合效果

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

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

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

4.环

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

之后我们在通过 border-radius来改变下框的圆角，再加入上 filter的效果，让其变得模糊，并且可以与小球形成融合效果，最后通过 设置一个动画，让其旋转起来就行了：

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

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

5.加入颜色

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

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

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

6.详细代码