CSS
语言：
CSSSCSS
确定
body {
background: #003;
-webkit-filter: contrast(10);
filter: contrast(10);
}
.w {
-webkit-animation: r 10s linear infinite;
animation: r 10s linear infinite;
position: relative;
width: 60px;
-webkit-transform: translate(calc(-50% + 50vw), calc(-50% + 50vh));
-ms-transform: translate(calc(-50% + 50vw), calc(-50% + 50vh));
transform: translate(calc(-50% + 50vw), calc(-50% + 50vh));
}
.tw {
-webkit-filter: blur(7px);
filter: blur(7px);
position: absolute;
mix-blend-mode: overlay;
-webkit-transform-origin: 30px 30px;
-ms-transform-origin: 30px 30px;
transform-origin: 30px 30px;
}
.tw:nth-child(0) {
color: #ebff99;
-webkit-transform: translateY(-30px) rotate(0deg);
-ms-transform: translateY(-30px) rotate(0deg);
transform: translateY(-30px) rotate(0deg);
}
.tw:nth-child(1) {
color: #99ffc2;
-webkit-transform: translateY(-30px) rotate(72deg);
-ms-transform: translateY(-30px) rotate(72deg);
transform: translateY(-30px) rotate(72deg);
}
.tw:nth-child(2) {
color: #99c2ff;
-webkit-transform: translateY(-30px) rotate(144deg);
-ms-transform: translateY(-30px) rotate(144deg);
transform: translateY(-30px) rotate(144deg);
}
.tw:nth-child(3) {
color: #eb99ff;
-webkit-transform: translateY(-30px) rotate(216deg);
-ms-transform: translateY(-30px) rotate(216deg);
transform: translateY(-30px) rotate(216deg);
}
.tw:nth-child(4) {
color: #f99;
-webkit-transform: translateY(-30px) rotate(288deg);
-ms-transform: translateY(-30px) rotate(288deg);
transform: translateY(-30px) rotate(288deg);
}
.tw:nth-child(5) {
color: #ebff99;
-webkit-transform: translateY(-30px) rotate(360deg);
-ms-transform: translateY(-30px) rotate(360deg);
transform: translateY(-30px) rotate(360deg);
}
.t {
-webkit-animation: t 4s infinite alternate;
animation: t 4s infinite alternate;
border: 30px solid transparent;
border-bottom-color: currentColor;
height: 0;
-webkit-transform-origin: -20px 30px;
-ms-transform-origin: -20px 30px;
transform-origin: -20px 30px;
width: 0;
}
@-webkit-keyframes t {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-44deg);
transform: rotate(-44deg);
}
}
@keyframes t {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-44deg);
transform: rotate(-44deg);
}
}
@-webkit-keyframes r {
0% {
-webkit-transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(0);
transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(0);
}
100% {
-webkit-transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(360deg);
transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(360deg);
}
}
@keyframes r {
0% {
-webkit-transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(0);
transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(0);
}
100% {
-webkit-transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(360deg);
transform: translate(calc(-50% + 50vw), calc(-50% + 50vh)) rotate(360deg);
}
}