正在准备设计规范
01.loader {02 display: flex;03 position: relative;04 justify-items: center;05 align-items: center;06 gap: 1rem;07 height: 55px;08 width: 200px;09 overflow: hidden;10}11 12.container {13 width: 100%;14 display: flex;15 flex-direction: column;16 height: 200px;17 position: relative;18 align-items: center;19}20 21.carousel {22 display: flex;23 gap: 1rem;24 flex-direction: column;25 position: absolute;26 width: 100%;27 transform-origin: center;28 animation-delay: 2s;29}30 31.loader .container:nth-child(3) {32 justify-content: flex-start;33 justify-items: flex-start;34 animation: scroll-up 4s infinite ease-in-out;35 animation-delay: 3s;36}37 38.loader .container:nth-child(2) {39 justify-content: flex-end;40 justify-items: flex-end;41 animation: scroll-down 4s infinite ease-in-out;42 animation-delay: 3s;43}44 45.loader .container:nth-child(1) {46 justify-content: flex-end;47 justify-items: flex-end;48 animation: scroll-down 3s infinite ease-in-out;49 animation-delay: 3s;50}51 52.love {53 background: red;54 display: flex;55 width: 30px;56 height: 30px;57 position: relative;58 align-items: center;59 justify-content: center;60 left: 8px;61 margin: 0.8rem 4px;62 transform: rotate(45deg);63 animation-delay: 2s;64}65 66.love::before, .love::after {67 content: '';68 position: absolute;69 width: 30px;70 height: 30px;71 border-radius: 50%;72 background: red;73}74 75.love::before {76 left: -16px;77}78 79.love::after {80 top: -16px;81}82 83.death {84 display: flex;85 width: 100%;86 height: 55px;87 position: relative;88 align-items: center;89 justify-content: center;90 animation: rotation 3s infinite ease-in-out;91 animation-delay: 1s;92}93 94.death:after {95 content: '';96 height: 63px;97 position: absolute;98 border-left: 12px solid red;99 transform: rotate(45deg);100 border-radius: 8px;101 top: -4px;102}103 104.death:before {105 content: '';106 height: 60px;107 position: absolute;108 border-left: 12px solid red;109 transform: rotate(-45deg);110}111 112.loader:hover {113 animation: none;114}115 116.robots {117 display: flex;118 width: 100%;119 height: 55px;120 justify-content: space-between;121 background-color: #ff0000;122 border-radius: 0 8px 8px;123 padding: 8px;124 animation-delay: 5s;125}126 127.robots::after {128 content: '';129 width: 12px;130 height: 12px;131 top: 0;132 left: 0;133 background-color: #ffffff;134 border-radius: 50%;135 animation-delay: 2s;136 animation: blink 0.5s 2 forwards;137}138 139.robots::before {140 content: '';141 width: 12px;142 height: 12px;143 top: 0;144 left: 0;145 background-color: #ffffff;146 border-radius: 50%;147 animation-delay: 2s;148 animation: blink 0.5s 2 forwards;149}150 151@keyframes scroll-up {152 0% {153 transform: translateY(0);154 filter: blur(0);155 }156 157 30% {158 transform: translateY(-150%);159 filter: blur(10px);160 }161 162 60% {163 transform: translateY(0);164 filter: blur(0px);165 }166}167 168@keyframes scroll-down {169 0% {170 transform: translateY(0);171 filter: blur(0);172 }173 174 30% {175 transform: translateY(150%);176 filter: blur(10px);177 }178 179 60% {180 transform: translateY(0);181 filter: blur(0px);182 }183}184 185@keyframes rotation {186 20%, 100% {187 transform: rotate(180deg);188 }189}190 191@keyframes blink {192 0% {193 height: 0;194 }195 196 20% {197 height: 12px;198 }199 200 100% {201 height: 12px;202 }203}