前言：
现时姐妹们对“js 动态加载css”可能比较珍视，小伙伴们都需要知道一些“js 动态加载css”的相关内容。那么小编也在网络上汇集了一些有关“js 动态加载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;}分享不易，请关注，点赞，评论哦，更多分享哦
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js 动态加载css
