返回组件库
按钮
组件库
AI Design
乌鸦走地
CSS
01.loader {02 scale: 0.75;03 position: relative;04 width: 200px;05 height: 200px;06 translate: 10px -20px;07}08.loader svg {09 position: absolute;10 top: 0;11 left: 0;12}13.head {14 translate: 27px -30px;15 z-index: 3;16 animation: bob 1s infinite ease-in;17}18.bod {19 translate: 0px 30px;20 z-index: 3;21 animation: bob 1s infinite ease-in-out;22}23.legr {24 translate: 75px 135px;25 z-index: 0;26 animation: rstep 1s infinite ease-in;27}28.legr {29 animation-delay: 0.45s;30}31 32.legl {33 translate: 30px 155px;34 z-index: 3;35 animation: lstep 1s infinite ease-in;36}37 38@keyframes bob {39 0% {40 transform: translateY(0) rotate(3deg);41 }42 5% {43 transform: translateY(0) rotate(3deg);44 }45 25% {46 transform: translateY(5px) rotate(0deg);47 }48 50% {49 transform: translateY(0px) rotate(-3deg);50 }51 70% {52 transform: translateY(5px) rotate(0deg);53 }54 100% {55 transform: translateY(0) rotate(3deg);56 }57}58 59@keyframes lstep {60 0% {61 transform: translateY(0) rotate(-5deg);62 }63 33% {64 transform: translateY(-15px) translate(32px) rotate(35deg);65 }66 66% {67 transform: translateY(0) translate(25px) rotate(-25deg);68 }69 100% {70 transform: translateY(0) rotate(-5deg);71 }72}73 74@keyframes rstep {75 0% {76 transform: translateY(0) translate(0px) rotate(-5deg);77 }78 33% {79 transform: translateY(-10px) translate(30px) rotate(35deg);80 }81 66% {82 transform: translateY(0) translate(20px) rotate(-25deg);83 }84 100% {85 transform: translateY(0) translate(0px) rotate(-5deg);86 }87}88 89#gnd {90 translate: -140px 0;91 rotate: 10deg;92 z-index: -1;93 filter: blur(0.5px) drop-shadow(1px 3px 5px #000000);94 opacity: 0.25;95 animation: scroll 5s infinite linear;96}97 98@keyframes scroll {99 0% {100 transform: translateY(25px) translate(50px);101 opacity: 0;102 }103 33% {104 opacity: 0.25;105 }106 66% {107 opacity: 0.25;108 }109 to {110 transform: translateY(-50px) translate(-100px);111 opacity: 0;112 }113}