CSS
语言：
CSSSCSS
确定
.line:nth-child(1) {
width: 8px;
height: 8px;
background-color: #f0eff4;
top: -4px;
left: -4px;
z-index: -1;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.12s;
animation-delay: 0.12s;
}
.line:nth-child(1):nth-child(odd) {
background-color: #000;
}
.line:nth-child(2) {
width: 16px;
height: 16px;
background-color: #f0eff4;
top: -8px;
left: -8px;
z-index: -2;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.24s;
animation-delay: 0.24s;
}
.line:nth-child(2):nth-child(odd) {
background-color: #000;
}
.line:nth-child(3) {
width: 24px;
height: 24px;
background-color: #f0eff4;
top: -12px;
left: -12px;
z-index: -3;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.36s;
animation-delay: 0.36s;
}
.line:nth-child(3):nth-child(odd) {
background-color: #000;
}
.line:nth-child(4) {
width: 32px;
height: 32px;
background-color: #f0eff4;
top: -16px;
left: -16px;
z-index: -4;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
.line:nth-child(4):nth-child(odd) {
background-color: #000;
}
.line:nth-child(5) {
width: 40px;
height: 40px;
background-color: #f0eff4;
top: -20px;
left: -20px;
z-index: -5;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.line:nth-child(5):nth-child(odd) {
background-color: #000;
}
.line:nth-child(6) {
width: 48px;
height: 48px;
background-color: #f0eff4;
top: -24px;
left: -24px;
z-index: -6;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
.line:nth-child(6):nth-child(odd) {
background-color: #000;
}
.line:nth-child(7) {
width: 56px;
height: 56px;
background-color: #f0eff4;
top: -28px;
left: -28px;
z-index: -7;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.84s;
animation-delay: 0.84s;
}
.line:nth-child(7):nth-child(odd) {
background-color: #000;
}
.line:nth-child(8) {
width: 64px;
height: 64px;
background-color: #f0eff4;
top: -32px;
left: -32px;
z-index: -8;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
.line:nth-child(8):nth-child(odd) {
background-color: #000;
}
.line:nth-child(9) {
width: 72px;
height: 72px;
background-color: #f0eff4;
top: -36px;
left: -36px;
z-index: -9;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.08s;
animation-delay: 1.08s;
}
.line:nth-child(9):nth-child(odd) {
background-color: #000;
}
.line:nth-child(10) {
width: 80px;
height: 80px;
background-color: #f0eff4;
top: -40px;
left: -40px;
z-index: -10;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.line:nth-child(10):nth-child(odd) {
background-color: #000;
}
.line:nth-child(11) {
width: 88px;
height: 88px;
background-color: #f0eff4;
top: -44px;
left: -44px;
z-index: -11;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.32s;
animation-delay: 1.32s;
}
.line:nth-child(11):nth-child(odd) {
background-color: #000;
}
.line:nth-child(12) {
width: 96px;
height: 96px;
background-color: #f0eff4;
top: -48px;
left: -48px;
z-index: -12;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
.line:nth-child(12):nth-child(odd) {
background-color: #000;
}
.line:nth-child(13) {
width: 104px;
height: 104px;
background-color: #f0eff4;
top: -52px;
left: -52px;
z-index: -13;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.56s;
animation-delay: 1.56s;
}
.line:nth-child(13):nth-child(odd) {
background-color: #000;
}
.line:nth-child(14) {
width: 112px;
height: 112px;
background-color: #f0eff4;
top: -56px;
left: -56px;
z-index: -14;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
.line:nth-child(14):nth-child(odd) {
background-color: #000;
}
.line:nth-child(15) {
width: 120px;
height: 120px;
background-color: #f0eff4;
top: -60px;
left: -60px;
z-index: -15;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.line:nth-child(15):nth-child(odd) {
background-color: #000;
}
.line:nth-child(16) {
width: 128px;
height: 128px;
background-color: #f0eff4;
top: -64px;
left: -64px;
z-index: -16;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
.line:nth-child(16):nth-child(odd) {
background-color: #000;
}
.line:nth-child(17) {
width: 136px;
height: 136px;
background-color: #f0eff4;
top: -68px;
left: -68px;
z-index: -17;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.04s;
animation-delay: 2.04s;
}
.line:nth-child(17):nth-child(odd) {
background-color: #000;
}
.line:nth-child(18) {
width: 144px;
height: 144px;
background-color: #f0eff4;
top: -72px;
left: -72px;
z-index: -18;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
.line:nth-child(18):nth-child(odd) {
background-color: #000;
}
.line:nth-child(19) {
width: 152px;
height: 152px;
background-color: #f0eff4;
top: -76px;
left: -76px;
z-index: -19;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.28s;
animation-delay: 2.28s;
}
.line:nth-child(19):nth-child(odd) {
background-color: #000;
}
.line:nth-child(20) {
width: 160px;
height: 160px;
background-color: #f0eff4;
top: -80px;
left: -80px;
z-index: -20;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.line:nth-child(20):nth-child(odd) {
background-color: #000;
}
.line:nth-child(21) {
width: 168px;
height: 168px;
background-color: #f0eff4;
top: -84px;
left: -84px;
z-index: -21;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.52s;
animation-delay: 2.52s;
}
.line:nth-child(21):nth-child(odd) {
background-color: #000;
}
.line:nth-child(22) {
width: 176px;
height: 176px;
background-color: #f0eff4;
top: -88px;
left: -88px;
z-index: -22;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
.line:nth-child(22):nth-child(odd) {
background-color: #000;
}
.line:nth-child(23) {
width: 184px;
height: 184px;
background-color: #f0eff4;
top: -92px;
left: -92px;
z-index: -23;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.76s;
animation-delay: 2.76s;
}
.line:nth-child(23):nth-child(odd) {
background-color: #000;
}
.line:nth-child(24) {
width: 192px;
height: 192px;
background-color: #f0eff4;
top: -96px;
left: -96px;
z-index: -24;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
.line:nth-child(24):nth-child(odd) {
background-color: #000;
}
.line:nth-child(25) {
width: 200px;
height: 200px;
background-color: #f0eff4;
top: -100px;
left: -100px;
z-index: -25;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.line:nth-child(25):nth-child(odd) {
background-color: #000;
}
.line:nth-child(26) {
width: 208px;
height: 208px;
background-color: #f0eff4;
top: -104px;
left: -104px;
z-index: -26;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
.line:nth-child(26):nth-child(odd) {
background-color: #000;
}
.line:nth-child(27) {
width: 216px;
height: 216px;
background-color: #f0eff4;
top: -108px;
left: -108px;
z-index: -27;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.24s;
animation-delay: 3.24s;
}
.line:nth-child(27):nth-child(odd) {
background-color: #000;
}
.line:nth-child(28) {
width: 224px;
height: 224px;
background-color: #f0eff4;
top: -112px;
left: -112px;
z-index: -28;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
.line:nth-child(28):nth-child(odd) {
background-color: #000;
}
.line:nth-child(29) {
width: 232px;
height: 232px;
background-color: #f0eff4;
top: -116px;
left: -116px;
z-index: -29;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.48s;
animation-delay: 3.48s;
}
.line:nth-child(29):nth-child(odd) {
background-color: #000;
}
.line:nth-child(30) {
width: 240px;
height: 240px;
background-color: #f0eff4;
top: -120px;
left: -120px;
z-index: -30;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
.line:nth-child(30):nth-child(odd) {
background-color: #000;
}
.line:nth-child(31) {
width: 248px;
height: 248px;
background-color: #f0eff4;
top: -124px;
left: -124px;
z-index: -31;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.72s;
animation-delay: 3.72s;
}
.line:nth-child(31):nth-child(odd) {
background-color: #000;
}
.line:nth-child(32) {
width: 256px;
height: 256px;
background-color: #f0eff4;
top: -128px;
left: -128px;
z-index: -32;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.84s;
animation-delay: 3.84s;
}
.line:nth-child(32):nth-child(odd) {
background-color: #000;
}
.line:nth-child(33) {
width: 264px;
height: 264px;
background-color: #f0eff4;
top: -132px;
left: -132px;
z-index: -33;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 3.96s;
animation-delay: 3.96s;
}
.line:nth-child(33):nth-child(odd) {
background-color: #000;
}
.line:nth-child(34) {
width: 272px;
height: 272px;
background-color: #f0eff4;
top: -136px;
left: -136px;
z-index: -34;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 4.08s;
animation-delay: 4.08s;
}
.line:nth-child(34):nth-child(odd) {
background-color: #000;
}
.line:nth-child(35) {
width: 280px;
height: 280px;
background-color: #f0eff4;
top: -140px;
left: -140px;
z-index: -35;
mix-blend-mode: difference;
-webkit-animation: magic 16s ease-in-out infinite alternate;
animation: magic 16s ease-in-out infinite alternate;
-webkit-animation-delay: 4.2s;
animation-delay: 4.2s;
}
.line:nth-child(35):nth-child(odd) {
background-color: #000;
}
@-webkit-keyframes magic {
50% {
-webkit-transform: rotate(-0.25turn) scale(1.6) translateX(125px);
transform: rotate(-0.25turn) scale(1.6) translateX(125px);
}
100% {
-webkit-transform: rotate(-0.5turn) scale(1.4) translateX(-65px);
transform: rotate(-0.5turn) scale(1.4) translateX(-65px);
}
}
@keyframes magic {
50% {
-webkit-transform: rotate(-0.25turn) scale(1.6) translateX(125px);
transform: rotate(-0.25turn) scale(1.6) translateX(125px);
}
100% {
-webkit-transform: rotate(-0.5turn) scale(1.4) translateX(-65px);
transform: rotate(-0.5turn) scale(1.4) translateX(-65px);
}
}
.line {
position: absolute;
border-radius: 25%;
}
body {
overflow: hidden;
background: #f0eff4;
}
section {
position: absolute;
-webkit-box-reflect: above;
mix-blend-mode: difference;
top: 50%;
left: 50%;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
