纯CSS3弹性小球加载动画特效

纯CSS3弹性小球加载动画特效

一款纯CSS3弹性的贝塞尔曲线+高斯模糊带来的视觉效果!

使用方法
在页面引入相关CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body{
    margin: 0;
    padding: 0;
    background-color: #000000;
}
.nav {
    display: flex;
    /*弹性盒模型*/
    justify-content: space-around;
    /*描述子元素在主轴的排列方式。均分间距*/
    align-items: center;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: #000000;
   filter: blur(15px) contrast(30);/*高斯模糊:值   ,  对比度:颜色最好高对比*/
}
 
.content {
    width: 100px;
    height: 100px;
    background-color: #FFFFFF;
   border-radius: 50%;
    /*float: left;*/
}
 
.content:nth-child(2) {
    animation:sport 3s infinite alternate ease-in-out;/*动画:名字, 正放   倒放   时间曲线——两边快中间慢一点*/
     
}
 
@keyframes sport {
    /*建立content的动画*/
    from {
        box-shadow: 350px 0px 0px #FFFFFF;/*建立一个content的影子动画*/
   }
    to {
        box-shadow: -350px 0px 0px #FFFFFF;
   }
}

文件信息:

    0

    发表评论