龙空技术网

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

程序员库里 215

前言:

此时你们对“css判断手机分辨率”大概比较看重,我们都想要知道一些“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 和 yroate(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);  }}
底坐

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

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

融合效果

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

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

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

来看看效果:

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

之后我们在通过 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);  }}

效果:

加入颜色

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

.contrast{    animation: hueRotate 6s linear infinite;}@keyframes hueRotate {  0% {      filter: contrast(15) hue-rotate(0);  }  100% {      filter: contrast(15) hue-rotate(360deg);  }}
详细代码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判断手机分辨率