1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS3-果冻-效果</title>
6 <style>
7 .element{
8 color: #f35626;
9 background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
10 -webkit-background-clip: text;
11 -webkit-text-fill-color: transparent;
12 -webkit-animation: hue 60s infinite linear;
13 margin-bottom: 1.5rem;
14 font-size: 3rem;
15 font-weight: 100;
16 line-height: 1;
17 letter-spacing: -.05em;
18 }
19 .animated {
20 -webkit-animation-duration: 3s;
21 animation-duration: 3s;
22 -webkit-animation-fill-mode: both;
23 animation-fill-mode: both;
24 }
25 @-webkit-keyframes jello {
26 from, 11.1%, to {
27 -webkit-transform: none;
28 transform: none;
29 }
30
31 22.2% {
32 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
33 transform: skewX(-12.5deg) skewY(-12.5deg);
34 }
35
36 33.3% {
37 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
38 transform: skewX(6.25deg) skewY(6.25deg);
39 }
40
41 44.4% {
42 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
43 transform: skewX(-3.125deg) skewY(-3.125deg);
44 }
45
46 55.5% {
47 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
48 transform: skewX(1.5625deg) skewY(1.5625deg);
49 }
50
51 66.6% {
52 -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
53 transform: skewX(-0.78125deg) skewY(-0.78125deg);
54 }
55
56 77.7% {
57 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
58 transform: skewX(0.390625deg) skewY(0.390625deg);
59 }
60
61 88.8% {
62 -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
63 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
64 }
65 }
66
67 @keyframes jello {
68 from, 11.1%, to {
69 -webkit-transform: none;
70 transform: none;
71 }
72
73 22.2% {
74 -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
75 transform: skewX(-12.5deg) skewY(-12.5deg);
76 }
77
78 33.3% {
79 -webkit-transform: skewX(6.25deg) skewY(6.25deg);
80 transform: skewX(6.25deg) skewY(6.25deg);
81 }
82
83 44.4% {
84 -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
85 transform: skewX(-3.125deg) skewY(-3.125deg);
86 }
87
88 55.5% {
89 -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
90 transform: skewX(1.5625deg) skewY(1.5625deg);
91 }
92
93 66.6% {
94 -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
95 transform: skewX(-0.78125deg) skewY(-0.78125deg);
96 }
97
98 77.7% {
99 -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
100 transform: skewX(0.390625deg) skewY(0.390625deg);
101 }
102
103 88.8% {
104 -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
105 transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
106 }
107 }
108
109 .jello {
110 -webkit-animation-name: jello;
111 animation-name: jello;
112 -webkit-transform-origin: center;
113 transform-origin: center;
114 }
115 </style>
116 </head>
117 <body>
118 <div class="element animated jello">jello</div>
119 </body>
120 </html>
时间： 2024-10-19 10:19:00