python123渐变的圆_CSS3 由线条组成的渐变光环 渐变色圆环形进度条

CSS

语言：

CSSSCSS

确定

body {

background: #111;

}

.wrap {

margin: 200px auto;

height: 0px;

width: 0px;

position: relative;

}

.wrap div {

height: 30px;

width: 2px;

background: #fe3541;

border-radius: 99em;

position: absolute;

transform-origin: center bottom;

transform: translateY(-80px);

}

.wrap div:nth-child(1) {

transform: rotate(6deg) translateY(-80px);

background: #fe3541;

}

.wrap div:nth-child(2) {

transform: rotate(12deg) translateY(-80px);

background: #fe3d35;

}

.wrap div:nth-child(3) {

transform: rotate(18deg) translateY(-80px);

background: #fe5135;

}

.wrap div:nth-child(4) {

transform: rotate(24deg) translateY(-80px);

background: #fe6535;

}

.wrap div:nth-child(5) {

transform: rotate(30deg) translateY(-80px);

background: #fe7935;

}

.wrap div:nth-child(6) {

transform: rotate(36deg) translateY(-80px);

background: #fe8d35;

}

.wrap div:nth-child(7) {

transform: rotate(42deg) translateY(-80px);

background: #fea235;

}

.wrap div:nth-child(8) {

transform: rotate(48deg) translateY(-80px);

background: #feb635;

}

.wrap div:nth-child(9) {

transform: rotate(54deg) translateY(-80px);

background: #feca35;

}

.wrap div:nth-child(10) {

transform: rotate(60deg) translateY(-80px);

background: #fede35;

}

.wrap div:nth-child(11) {

transform: rotate(66deg) translateY(-80px);

background: #fef235;

}

.wrap div:nth-child(12) {

transform: rotate(72deg) translateY(-80px);

background: #f6fe35;

}

.wrap div:nth-child(13) {

transform: rotate(78deg) translateY(-80px);

background: #e2fe35;

}

.wrap div:nth-child(14) {

transform: rotate(84deg) translateY(-80px);

background: #cefe35;

}

.wrap div:nth-child(15) {

transform: rotate(90deg) translateY(-80px);

background: #bafe35;

}

.wrap div:nth-child(16) {

transform: rotate(96deg) translateY(-80px);

background: #a5fe35;

}

.wrap div:nth-child(17) {

transform: rotate(102deg) translateY(-80px);

background: #91fe35;

}

.wrap div:nth-child(18) {

transform: rotate(108deg) translateY(-80px);

background: #7dfe35;

}

.wrap div:nth-child(19) {

transform: rotate(114deg) translateY(-80px);

background: #69fe35;

}

.wrap div:nth-child(20) {

transform: rotate(120deg) translateY(-80px);

background: #55fe35;

}

.wrap div:nth-child(21) {

transform: rotate(126deg) translateY(-80px);

background: #41fe35;

}

.wrap div:nth-child(22) {

transform: rotate(132deg) translateY(-80px);

background: #35fe3d;

}

.wrap div:nth-child(23) {

transform: rotate(138deg) translateY(-80px);

background: #35fe51;

}

.wrap div:nth-child(24) {

transform: rotate(144deg) translateY(-80px);

background: #35fe65;

}

.wrap div:nth-child(25) {

transform: rotate(150deg) translateY(-80px);

background: #35fe79;

}

.wrap div:nth-child(26) {

transform: rotate(156deg) translateY(-80px);

background: #35fe8e;

}

.wrap div:nth-child(27) {

transform: rotate(162deg) translateY(-80px);

background: #35fea2;

}

.wrap div:nth-child(28) {

transform: rotate(168deg) translateY(-80px);

background: #35feb6;

}

.wrap div:nth-child(29) {

transform: rotate(174deg) translateY(-80px);

background: #35feca;

}

.wrap div:nth-child(30) {

transform: rotate(180deg) translateY(-80px);

background: #35fede;

}

.wrap div:nth-child(31) {

transform: rotate(186deg) translateY(-80px);

background: #35fef2;

}

.wrap div:nth-child(32) {

transform: rotate(192deg) translateY(-80px);

background: #35f6fe;

}

.wrap div:nth-child(33) {

transform: rotate(198deg) translateY(-80px);

background: #35e2fe;

}

.wrap div:nth-child(34) {

transform: rotate(204deg) translateY(-80px);

background: #35cefe;

}

.wrap div:nth-child(35) {

transform: rotate(210deg) translateY(-80px);

background: #35bafe;

}

.wrap div:nth-child(36) {

transform: rotate(216deg) translateY(-80px);

background: #35a5fe;

}

.wrap div:nth-child(37) {

transform: rotate(222deg) translateY(-80px);

background: #3591fe;

}

.wrap div:nth-child(38) {

transform: rotate(228deg) translateY(-80px);

background: #357dfe;

}

.wrap div:nth-child(39) {

transform: rotate(234deg) translateY(-80px);

background: #3569fe;

}

.wrap div:nth-child(40) {

transform: rotate(240deg) translateY(-80px);

background: #3555fe;

}

.wrap div:nth-child(41) {

transform: rotate(246deg) translateY(-80px);

background: #3541fe;

}

.wrap div:nth-child(42) {

transform: rotate(252deg) translateY(-80px);

background: #3d35fe;

}

.wrap div:nth-child(43) {

transform: rotate(258deg) translateY(-80px);

background: #5135fe;

}

.wrap div:nth-child(44) {

transform: rotate(264deg) translateY(-80px);

background: #6535fe;

}

.wrap div:nth-child(45) {

transform: rotate(270deg) translateY(-80px);

background: #7935fe;

}

.wrap div:nth-child(46) {

transform: rotate(276deg) translateY(-80px);

background: #8d35fe;

}

.wrap div:nth-child(47) {

transform: rotate(282deg) translateY(-80px);

background: #a235fe;

}

.wrap div:nth-child(48) {

transform: rotate(288deg) translateY(-80px);

background: #b635fe;

}

.wrap div:nth-child(49) {

transform: rotate(294deg) translateY(-80px);

background: #ca35fe;

}

.wrap div:nth-child(50) {

transform: rotate(300deg) translateY(-80px);

background: #de35fe;

}

.wrap div:nth-child(51) {

transform: rotate(306deg) translateY(-80px);

background: #f235fe;

}

.wrap div:nth-child(52) {

transform: rotate(312deg) translateY(-80px);

background: #fe35f6;

}

.wrap div:nth-child(53) {

transform: rotate(318deg) translateY(-80px);

background: #fe35e2;

}

.wrap div:nth-child(54) {

transform: rotate(324deg) translateY(-80px);

background: #fe35ce;

}

.wrap div:nth-child(55) {

transform: rotate(330deg) translateY(-80px);

background: #fe35ba;

}

.wrap div:nth-child(56) {

transform: rotate(336deg) translateY(-80px);

background: #fe35a5;

}

.wrap div:nth-child(57) {

transform: rotate(342deg) translateY(-80px);

background: #fe3591;

}

.wrap div:nth-child(58) {

transform: rotate(348deg) translateY(-80px);

background: #fe357d;

}

.wrap div:nth-child(59) {

transform: rotate(354deg) translateY(-80px);

background: #fe3569;

}