css3半空心圆_CSS3 半圆形涟漪

CSS

语言：

CSSSCSS

确定

body {

overflow: hidden;

}

.Ring {

position: absolute;

top: 0;

left: 0;

}

.Ring:nth-child(1) {

width: 1px;

height: 1px;

margin: -0.5px;

border-radius: 99999px;

background-color: #a20000;

box-shadow: 0 0 20px;

z-index: -1;

}

.Ring:nth-child(2) {

width: 3.2px;

height: 3.2px;

margin: -1.6px;

border-radius: 99999px;

background-color: #a00;

box-shadow: 0 0 20px;

z-index: -2;

}

.Ring:nth-child(3) {

width: 6.84px;

height: 6.84px;

margin: -3.42px;

border-radius: 99999px;

background-color: #b30000;

box-shadow: 0 0 20px;

z-index: -3;

}

.Ring:nth-child(4) {

width: 12.208px;

height: 12.208px;

margin: -6.104px;

border-radius: 99999px;

background-color: #b00;

box-shadow: 0 0 20px;

z-index: -4;

}

.Ring:nth-child(5) {

width: 19.6496px;

height: 19.6496px;

margin: -9.8248px;

border-radius: 99999px;

background-color: #c40000;

box-shadow: 0 0 20px;

z-index: -5;

}

.Ring:nth-child(6) {

width: 29.57952px;

height: 29.57952px;

margin: -14.78976px;

border-radius: 99999px;

background-color: #c00;

box-shadow: 0 0 20px;

z-index: -6;

}

.Ring:nth-child(7) {

width: 42.49542px;

height: 42.49542px;

margin: -21.24771px;

border-radius: 99999px;

background-color: #d50000;

box-shadow: 0 0 20px;

z-index: -7;

}

.Ring:nth-child(8) {

width: 58.99451px;

height: 58.99451px;

margin: -29.49725px;

border-radius: 99999px;

background-color: #d00;

box-shadow: 0 0 20px;

z-index: -8;

}

.Ring:nth-child(9) {

width: 79.79341px;

height: 79.79341px;

margin: -39.89671px;

border-radius: 99999px;

background-color: #e60000;

box-shadow: 0 0 20px;

z-index: -9;

}

.Ring:nth-child(10) {

width: 105.75209px;

height: 105.75209px;

margin: -52.87605px;

border-radius: 99999px;

background-color: #e00;

box-shadow: 0 0 20px;

z-index: -10;

}

.Ring:nth-child(11) {

width: 137.90251px;

height: 137.90251px;

margin: -68.95126px;

border-radius: 99999px;

background-color: #f70000;

box-shadow: 0 0 20px;

z-index: -11;

}

.Ring:nth-child(12) {

width: 177.48301px;

height: 177.48301px;

margin: -88.74151px;

border-radius: 99999px;

background-color: red;

box-shadow: 0 0 20px;

z-index: -12;

}

.Ring:nth-child(13) {

width: 225.97962px;

height: 225.97962px;

margin: -112.98981px;

border-radius: 99999px;

background-color: #ff0909;

box-shadow: 0 0 20px;

z-index: -13;

}

.Ring:nth-child(14) {

width: 285.17554px;

height: 285.17554px;

margin: -142.58777px;

border-radius: 99999px;

background-color: #f11;

box-shadow: 0 0 20px;

z-index: -14;

}

.Ring:nth-child(15) {

width: 357.21065px;

height: 357.21065px;

margin: -178.60532px;

border-radius: 99999px;

background-color: #ff1a1a;

box-shadow: 0 0 20px;

z-index: -15;

}

.Ring:nth-child(16) {

width: 444.65278px;

height: 444.65278px;

margin: -222.32639px;

border-radius: 99999px;

background-color: #f22;

box-shadow: 0 0 20px;

z-index: -16;

}

.Ring:nth-child(17) {

width: 550.58333px;

height: 550.58333px;

margin: -275.29167px;

border-radius: 99999px;

background-color: #ff2b2b;

box-shadow: 0 0 20px;

z-index: -17;

}

.Ring:nth-child(18) {

width: 678.7px;

height: 678.7px;

margin: -339.35px;

border-radius: 99999px;

background-color: #f33;

box-shadow: 0 0 20px;

z-index: -18;

}

.Ring:nth-child(19) {

width: 833.44px;

height: 833.44px;

margin: -416.72px;

border-radius: 99999px;

background-color: #ff3c3c;

box-shadow: 0 0 20px;

z-index: -19;

}

.Ring:nth-child(20) {

width: 1020.128px;

height: 1020.128px;

margin: -510.064px;

border-radius: 99999px;

background-color: #f44;

box-shadow: 0 0 20px;

z-index: -20;

}

.Ring:nth-child(21) {

width: 1245.1536px;

height: 1245.1536px;

margin: -622.5768px;

border-radius: 99999px;

background-color: #ff4d4d;

box-shadow: 0 0 20px;

z-index: -21;

}

.Ring:nth-child(22) {

width: 1516.18432px;

height: 1516.18432px;

margin: -758.09216px;

border-radius: 99999px;

background-color: #f55;

box-shadow: 0 0 20px;

z-index: -22;

}

.Ring:nth-child(23) {

width: 1842.42118px;

height: 1842.42118px;

margin: -921.21059px;

border-radius: 99999px;

background-color: #ff5e5e;

box-shadow: 0 0 20px;

z-index: -23;

}

.Ring:nth-child(24) {

width: 2234.90542px;

height: 2234.90542px;

margin: -1117.45271px;

border-radius: 99999px;

background-color: #f66;

box-shadow: 0 0 20px;

z-index: -24;

}

.Ring:nth-child(25) {

width: 2706.8865px;

height: 2706.8865px;

margin: -1353.44325px;

border-radius: 99999px;

background-color: #ff6f6f;

box-shadow: 0 0 20px;

z-index: -25;

}

.Ring:nth-child(26) {

width: 3274.2638px;

height: 3274.2638px;

margin: -1637.1319px;

border-radius: 99999px;

background-color: #f77;

box-shadow: 0 0 20px;

z-index: -26;

}

.Ring:nth-child(27) {

width: 3956.11656px;

height: 3956.11656px;

margin: -1978.05828px;

border-radius: 99999px;

background-color: #ff8080;

box-shadow: 0 0 20px;

z-index: -27;

}

.Ring:nth-child(28) {

width: 4775.33987px;

height: 4775.33987px;

margin: -2387.66994px;

border-radius: 99999px;

background-color: #f88;

box-shadow: 0 0 20px;

z-index: -28;

}

.Ring:nth-child(29) {

width: 5759.40784px;

height: 5759.40784px;

margin: -2879.70392px;

border-radius: 99999px;

background-color: #ff9191;

box-shadow: 0 0 20px;

z-index: -29;

}

.Ring:nth-child(30) {

width: 6941.28941px;

height: 6941.28941px;

margin: -3470.64471px;

border-radius: 99999px;

background-color: #f99;

box-shadow: 0 0 20px;

z-index: -30;

}