纯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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<style>
body {
background: #202124;
}
   
@-webkit-keyframes circle {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 0;
}
50% {
  opacity: 1;
}
80% {
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
  opacity: 1;
}
100% {
  opacity: 0;
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
}
}
   
@keyframes circle {
0% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 0;
}
50% {
  opacity: 1;
}
80% {
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
  opacity: 1;
}
100% {
  opacity: 0;
  -webkit-transform: translateY(-100vh);
          transform: translateY(-100vh);
}
}
@-webkit-keyframes shadow {
0% {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
30% {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
100% {
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
}
@keyframes shadow {
0% {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
30% {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
100% {
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
}
.shape {
position: absolute;
width: 66px;
height: 66px;
-webkit-animation: circle 5s linear infinite;
        animation: circle 5s linear infinite;
-webkit-animation-fill-mode: both;
        animation-fill-mode: both;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.shape::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 360px;
-webkit-transform-origin: top center;
        transform-origin: top center;
-webkit-animation: inherit;
        animation: inherit;
-webkit-animation-name: shadow;
        animation-name: shadow;
}
   
.circle {
top: calc(100vh - 66px);
left: calc(25vw - 66px);
background: linear-gradient(45deg, #49E7C2 0%, #7AEC90 100%);
border-radius: 100%;
}
.circle::after {
background: linear-gradient(-180deg, rgba(73, 231, 194, 0.4) 0%, rgba(28, 28, 28, 0) 100%);
}
   
.rectangle {
top: calc(100vh - 66px);
left: calc(50vw - 66px);
background: linear-gradient(45deg, #EA9F45 0%, #F4EE51 100%);
-webkit-animation-delay: 2s;
        animation-delay: 2s;
}
.rectangle::after {
background: linear-gradient(-180deg, rgba(234, 159, 69, 0.3) 0%, rgba(28, 28, 28, 0) 100%);
top: 100%;
}
   
.triangle {
top: calc(100vh - 66px);
left: calc(75vw - 66px);
background: linear-gradient(45deg, #22A0F9 0%, #71FDC8 100%);
-webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);
        clip-path: polygon(0 0, 100% 100%, 100% 0);
-webkit-animation-delay: 1s;
        animation-delay: 1s;
}
.triangle::after {
background: linear-gradient(-180deg, rgba(34, 223, 249, 0.4) 0%, rgba(28, 28, 28, 0) 100%);
top: 0;
will-change: transform;
}
</style>

文件信息:

    1

    发表评论