把圈子变小，把语速放缓，把心放宽，把生活打理简单，把故事往心底深藏，把手边事再做得好一点，现在想要的以后都会有，等你自己可以发出微光的时候，就再也不会害怕寒冷了。
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>
