如何创立一个公众号_汕头建站模板厂家_下载地图导航手机版免流量费用_指数查询

css-loader-nature

loader-1

.loader-1 {width: 50px;aspect-ratio: 1;background: #ffd738;border-radius: 50%;display: grid;
}.loader-1::before,
.loader-1::after {content: "";grid-area: 1/1;background: inherit;clip-path: polygon(0 0, 50% 40%, 100% 0, 60% 50%, 100% 100%, 50% 60%, 0 100%, 40% 50%);animation: l1 1s infinite alternate;transform: rotate(var(--r, 0)) scale(1)
}.loader-1::after {--r: 45deg;
}@keyframes l1 {100% {transform: rotate(var(--r, 0)) scale(1.4)}
}

loader-2

 .loader-2 {width: 60px;aspect-ratio: 1;display: grid;border-radius: 50%;background: radial-gradient(circle 15px, #ffd738 90%, #0000);filter: drop-shadow(0px 0px 1px #ffd738);animation: l2 1s infinite alternate linear;}.loader-2::before,.loader-2::after {content: "";grid-area: 1/1;border-radius: 50%;--g: no-repeat linear-gradient(#ffd738 0 0) 50%;background:var(--g)/100% 5px,var(--g)/5px 100%;-webkit-mask: radial-gradient(farthest-side, #0000 60%, #000 61%);}.loader-2::after {transform: rotate(45deg);}@keyframes l2 {100% {filter: drop-shadow(0px 0px 20px #ffd738)}}

loader-3

 .loader-3 {width: 50px;aspect-ratio: 1;display: flex;filter: drop-shadow(0px 0px 1px #8d847f);animation: l3 1s infinite alternate linear;}.loader-3:before {content: "";flex: 1;background: #8d847f;border-radius: 50%;-webkit-mask: radial-gradient(circle closest-side at 66% 40%, #0000 115%, #000 118%);}@keyframes l3 {100% {filter: drop-shadow(0px 0px 20px #8d847f)}}

loader-4

 .loader-4 {width: 50px;aspect-ratio: 1;background-color: #8d847f;border-radius: 50%;animation: l4 3s infinite;}@keyframes l4 {12.5% {background-image: radial-gradient(80% 65% at left, #0000 94%, #fff9)}25% {background-image: linear-gradient(90deg, #0000 50%, #fff9 0)}37.5% {background-image: radial-gradient(80% 65% at right, #fff9 94%, #0000)}50% {background-image: linear-gradient(#fff9 0 0)}62.5% {background-image: radial-gradient(80% 65% at left, #fff9 94%, #0000)}75% {background-image: linear-gradient(-90deg, #0000 50%, #fff9 0)}87.5% {background-image: radial-gradient(80% 65% at right, #0000 94%, #fff9)}}

loader-5

 .loader-5 {width: 80px;height: 40px;border-radius: 100px 100px 0 0;position: relative;overflow: hidden;}.loader-5:before {content: "";position: absolute;inset: 0 0 -100%;background:radial-gradient(farthest-side, #ffd738 80%, #0000) left 70% top 20%/15px 15px,radial-gradient(farthest-side, #020308 92%, #0000) left 65% bottom 19%/12px 12px,radial-gradient(farthest-side, #ecfefe 92%, #0000) left 70% bottom 20%/15px 15px,linear-gradient(#9eddfe 50%, #020308 0);background-repeat: no-repeat;animation: l5 2s infinite;}@keyframes l5 {0%,20% {transform: rotate(0)}40%,60% {transform: rotate(.5turn)}80%,100% {transform: rotate(1turn)}}

loader-6

 .loader-6 {width: 80px;height: 40px;border-radius: 100px 100px 0 0;background:linear-gradient(0deg, #0000, #fff, #0000) 70% 30%,linear-gradient(90deg, #0000, #fff, #0000) 72% 32%,linear-gradient(0deg, #0000, #fff, #0000) 26% 42%,linear-gradient(90deg, #0000, #fff, #0000) 23% 44%,linear-gradient(0deg, #0000, #fff, #0000) 51% 54%,linear-gradient(90deg, #0000, #fff, #0000) 51% 53% #020308;background-size: 2px 10px, 10px 2px;background-repeat: no-repeat;position: relative;overflow: hidden;}.loader-6:before,.loader-6:after {content: "";position: absolute;inset: 100% auto auto 20px;height: 3px;width: 20px;background: linear-gradient(90deg, #0000, #fff);transform-origin: right;transform: rotate(-20deg) translate(-20px);animation: l6 2s infinite;}.loader-6:after {inset: 100% auto auto -5px;animation-delay: .75s;}@keyframes l6 {100% {transform: rotate(-20deg) translate(120px)}}

loader-7

 .loader-7 {width: 80px;height: 40px;background:radial-gradient(circle 11px at top, #0000 94%, #b0e5f3) 0 20px,radial-gradient(circle 11px at top, #0000 94%, #5dc1e4) 0 10px,radial-gradient(circle 11px at top, #0000 94%, #008cd9) 0 0;background-size: 20px 100%;background-repeat: repeat-x;animation: l7 1s infinite linear;}@keyframes l7 {50% {background-position: 10px 15px, -10px 12px, 15px 8px}100% {background-position: 20px 20px, -20px 10px, 20px 0px}}

loader-8

 .loader-8 {width: 100px;height: 50px;border-radius: 100px 100px 0 0;position: relative;overflow: hidden;}.loader-8:before {content: "";position: absolute;inset: 0 0 -100%;background: radial-gradient(farthest-side at top, #0000 35%, #aa47be, #039be6, #26c6dc, #459e44, #f9ec44, #f68524, #fa3536, #0000) bottom/100% 50% no-repeat;animation: l8 2s infinite;}@keyframes l8 {0%,20% {transform: rotate(0)}40%,60% {transform: rotate(.5turn)}80%,100% {transform: rotate(1turn)}}

loader-9

 .loader-9 {width: 80px;height: 40px;background: #4dbefa;position: relative;overflow: hidden;animation: l9-0 1.5s infinite steps(10);}.loader-9:before,.loader-9:after {content: "";position: absolute;inset: -50%;--rad: radial-gradient(1px 4px, #eee 92%, #0000);background: var(--rad) 20% 0, var(--rad) 70% 7%;background-size: var(--w, 20px) var(--h, 18px);animation: l9-1 0.2s linear infinite;transform: skew(-10deg);}.loader-9:after {--h: 12px;--w: 16px;animation-duration: 0.3s;}@keyframes l9-0 {0%,15%,20%,30%,100% {background: #4dbefa}10%,22% {background: #7accf7}}@keyframes l9-1 {100% {transform: skew(-10deg) translateY(var(--h, 18px))}}

loader-10

 .loader-10 {width: 80px;height: 40px;background:radial-gradient(circle 25px at top right, #ffd738 40%, #0000),#4dbefa;position: relative;overflow: hidden;}.loader-10:before,.loader-10:after {content: "";position: absolute;top: 4px;left: -40px;width: 36px;height: 20px;--c: radial-gradient(farthest-side, #fff 96%, #0000);background:var(--c) 100% 100% /30% 60%,var(--c) 70% 0 /50% 100%,var(--c) 0 100% /36% 68%,var(--c) 27% 18% /26% 40%,linear-gradient(#fff 0 0) bottom/67% 58%;background-repeat: no-repeat;animation: l10 2s linear infinite;}.loader-10:after {top: 15px;--l: 200%;}@keyframes l10 {100% {left: var(--l, 105%)}}

loader-11

 .loader-11 {width: calc(6*30px);height: 50px;display: flex;color: #8d7958;filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);clip-path: inset(0 100% 0 0);animation: l11 2s infinite steps(7);}.loader-11:before {content: "";width: 30px;height: 25px;background: currentColor;clip-path: polygon(0 50%, 30% 40%, 100% 0, 60% 40%, 100% 50%, 60% 60%, 100% 100%, 30% 60%);}@keyframes l11 {100% {clip-path: inset(0 -30px 0 0)}}

loader-12

 .loader-12 {width: calc(6*30px);height: 50px;display: flex;color: #8d7958;filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);clip-path: inset(0 100% 0 0);animation: l12 2s infinite steps(7);}.loader-12:before {content: "";width: 30px;height: 25px;--c: no-repeat radial-gradient(farthest-side, currentColor 92%, #0000);background:var(--c) left /70% 70%,var(--c) right/20% 20%,var(--c) top 0 right 15%/20% 20%,var(--c) bottom 0 right 15%/20% 20%;}@keyframes l12 {100% {clip-path: inset(0 -30px 0 0)}}

loader-13

 .loader-13 {width: calc(6*30px);height: 50px;display: flex;color: #8d7958;filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);clip-path: inset(0 100% 0 0);animation: l13 2s infinite steps(7);}.loader-13:before {content: "";width: 30px;height: 25px;background:radial-gradient(farthest-side at right, currentColor 92%, #0000) left/20px 100% no-repeat,radial-gradient(farthest-side, currentColor 92%, #0000) right/17px 9px repeat-y;}@keyframes l13 {100% {clip-path: inset(0 -30px 0 0)}}

loader-14

 .loader-14 {width: calc(6*30px);height: 50px;display: grid;color: #8d7958;filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);clip-path: inset(0 100% 0 0);animation: l14 2s infinite steps(7);}.loader-14:before,.loader-14:after {content: "";width: 24px;grid-area: 1/1;height: 9px;background:radial-gradient(farthest-side, currentColor 90%, #0000) left/10px 9px,conic-gradient(from -106deg at right, #0000, currentColor 2deg 29deg, #0000 33deg) right/17px 11px;background-repeat: no-repeat;transform: rotate(7deg);transform-origin: 5px 50%;}.loader-14:after {margin-top: 12px;transform: rotate(-7deg);}@keyframes l14 {100% {clip-path: inset(0 -30px 0 0)}}

loader-15

 .loader-15 {width: 80px;height: 40px;background: #83def1;position: relative;overflow: hidden;}.loader-15:before {content: "";position: absolute;top: 10px;left: 0;height: 20px;width: 30px;background:radial-gradient(farthest-side, #000 50%, #fff 52% 80%, #0000) 78% 22%/5px 5px,radial-gradient(farthest-side, #fb4f05 92%, #0000) right/80% 100%,radial-gradient(farthest-side at left, #fb4f05 92%, #0000) left/35% 80%;background-repeat: no-repeat;clip-path: polygon(0 0, 100% 0, 100% 40%, 81% 50%, 100% 60%, 100% 100%, 0 100%, 20% 50%);animation: l15 1.5s infinite;}@keyframes l15 {0% {transform: translate(-100%)}40% {transform: translate(15px)}80%,100% {transform: translate(100px)}}

loader-16

 .loader-16 {width: 20px;height: 80px;background: #935936;position: relative;}.loader-16:before {content: "";position: absolute;top: 10px;left: -22px;width: 25px;height: 60px;background:radial-gradient(farthest-side, #fff 92%, #0000) 60% 6px/4px 4px,radial-gradient(50% 60%, #53707b 92%, #0000) center/70% 55%,radial-gradient(farthest-side, #53707b 92%, #0000) 50% 3px/14px 14px,radial-gradient(142% 100% at bottom right, #0000 64%, #53707b 65%) bottom/57% 40%,conic-gradient(from -120deg at right, #53707b 36deg, #0000 0)100% 3px/51% 12px,conic-gradient(from 120deg at top left, #0000, #ef524a 2deg 40deg, #0000 43deg) top/100% 10px;background-repeat: no-repeat;transform: rotate(-26deg);transform-origin: 100% 80%;animation: l16 .25s infinite linear alternate;}.loader-16:after {content: "";position: absolute;width: 6px;height: 12px;left: -6px;bottom: 15px;border-radius: 100px 0 0 100px;background: #53707b;}@keyframes l16 {100% {transform: rotate(0)}}