首页 > 代码库 > CSS3 果冻效果

CSS3 果冻效果

2024-09-01 22:14:24   219人阅读

技术分享

 

 

技术分享 
  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>
View Code

技术分享

CSS3 果冻效果


联系
我们