css动画效果（经典款~你值得保存）

经典款

加载动画效果演示

HTML代码

<div class="classic-1"></div> <div class="classic-2"></div> <div class="classic-3"></div> <div class="classic-4"></div> <div class="classic-5"></div> <div class="classic-6"></div> <div class="classic-7"></div> <div class="classic-8"></div> <div class="classic-9"></div> <div class="classic-10"></div>

CSS代码

[class*=classic]:before { content:"Loading..."; } .classic-1 { font-weight: bold; font-family: sans-serif; font-size: 30px; animation:c1 1s linear infinite alternate; } @keyframes c1 {to{opacity: 0}} .classic-2 { font-weight: bold; font-family: sans-serif; font-size: 30px; padding-bottom: 8px; background:linear-gradient(currentColor 0 0) bottom left/0% 3px no-repeat; animation:c2 2s linear infinite; } @keyframes c2 {to{background-size: 100% 3px}} .classic-3 { font-weight: bold; font-family: sans-serif; font-size: 30px; padding:0 5px 8px 0; background:repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 200% 100%/200% 3px no-repeat; animation:c3 2s steps(6) infinite; } @keyframes c3 {to{background-position: 80% 100%}} .classic-4 { font-weight: bold; font-family: monospace; font-size: 30px; clip-path: inset(0 3ch 0 0); animation:c4 1s steps(4) infinite; } @keyframes c4 {to{clip-path: inset(0 -1ch 0 0)}} .classic-5 { font-weight: bold; font-family: monospace; font-size: 30px; clip-path: inset(0 100% 0 0); animation:c5 2s steps(11) infinite; } @keyframes c5 {to{clip-path: inset(0 -1ch 0 0)}} .classic-6 { --c:#000; font-weight: bold; font-family: monospace; font-size: 30px; color:#0000; overflow:hidden; text-shadow:0 0 var(--c),11ch 0 var(--c); animation:c6 2s infinite linear; } @keyframes c6 {to{text-shadow:-11ch 0 var(--c),0ch 0 var(--c)}} .classic-7 { font-weight: bold; font-family: monospace; font-size: 30px; color:#0000; background:linear-gradient(90deg,red calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%; -webkit-background-clip:text; background-clip:text; animation:c7 2s infinite steps(11); } @keyframes c7 {to{background-position: left}} .classic-8 { font-weight: bold; font-family: monospace; font-size: 30px; color:#0000; background:linear-gradient(90deg,#000 calc(50% - 0.5ch),red 0 calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%; -webkit-background-clip:text; background-clip:text; animation:c8 2s infinite steps(11); } @keyframes c8 {to{background-position: left}} .classic-9 { font-weight: bold; font-family: monospace; font-size: 30px; color:#0000; overflow:hidden; text-shadow:0 0 #000,11ch 0 green,22ch 0 red,33ch 0 blue,44ch 0 #000; animation:c9 5s infinite cubic-bezier(0.3,1,0,1); } @keyframes c9 { 25% {text-shadow:-11ch 0 #000, 0ch 0 green, 11ch 0 red, 22ch 0 blue,33ch 0 #000} 50% {text-shadow:-22ch 0 #000,-11ch 0 green, 0ch 0 red, 11ch 0 blue,22ch 0 #000} 75% {text-shadow:-33ch 0 #000,-22ch 0 green,-11ch 0 red, 0ch 0 blue,11ch 0 #000} 100%{text-shadow:-44ch 0 #000,-33ch 0 green,-22ch 0 red,-11ch 0 blue, 0ch 0 #000} } .classic-10 { font-weight: bold; font-family: monospace; font-size: 30px; color:#0000; background: linear-gradient(90deg,#000 25%,green 0 50%,red 0 75%,blue 0) 0 0/400% 100%; -webkit-background-clip:text; background-clip:text; animation:c10 5s infinite cubic-bezier(0.3,1,0,1); } @keyframes c10 { 25% {background-position: calc(1*100%/3) 0} 50% {background-position: calc(2*100%/3) 0} 75% {background-position: calc(3*100%/3) 0} 100%{background-position: calc(4*100%/3) 0} } /**/ body { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); grid-auto-rows: 130px; place-items:center; } * { box-sizing: border-box; }

分享不易，请关注，点赞，评论哦，更多分享哦