html 透明的圆形,CSS3 花蝴蝶形状的3D透明圆球旋转变幻
CSS
语言：
CSSSCSS
确定
html,
body {
background: #111;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.wrapper {
position: relative;
float: left;
width: 33%;
height: 100%;
}
.circ {
border-radius: 100%;
position: absolute;
width: 25vw;
height: 25vw;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 100%;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.wrapper-1 .circ {
-webkit-animation: rotateLessX linear infinite alternate;
animation: rotateLessX linear infinite alternate;
}
.wrapper-2 .circ {
-webkit-animation: rotateBoth linear infinite alternate;
animation: rotateBoth linear infinite alternate;
}
.wrapper-3 .circ {
-webkit-animation: rotateLessY linear infinite alternate;
animation: rotateLessY linear infinite alternate;
}
.wrapper-1 .circ:nth-child(1) {
-webkit-animation-duration: 23s;
animation-duration: 23s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(left, rgba(6, 237, 255, 0.10886), rgba(119, 207, 255, 0.11855));
background-image: linear-gradient(to right, rgba(6, 237, 255, 0.10886), rgba(119, 207, 255, 0.11855));
}
.wrapper-1 .circ:nth-child(2) {
-webkit-animation-duration: 14s;
animation-duration: 14s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(top, rgba(129, 171, 255, 0.1448), rgba(255, 240, 255, 0.09003));
background-image: linear-gradient(to bottom, rgba(129, 171, 255, 0.1448), rgba(255, 240, 255, 0.09003));
}
.wrapper-1 .circ:nth-child(3) {
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(left, rgba(255, 73, 209, 0.10605), rgba(255, 93, 255, 0.12174));
background-image: linear-gradient(to right, rgba(255, 73, 209, 0.10605), rgba(255, 93, 255, 0.12174));
}
.wrapper-1 .circ:nth-child(4) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(left, rgba(11, 39, 255, 0.14656), rgba(255, 27, 246, 0.10282));
background-image: linear-gradient(to right, rgba(11, 39, 255, 0.14656), rgba(255, 27, 246, 0.10282));
}
.wrapper-1 .circ:nth-child(5) {
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(bottom, rgba(213, 255, 255, 0.09473), rgba(64, 164, 255, 0.08355));
background-image: linear-gradient(to top, rgba(213, 255, 255, 0.09473), rgba(64, 164, 255, 0.08355));
}
.wrapper-1 .circ:nth-child(6) {
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(right, rgba(255, 34, 255, 0.07088), rgba(255, 255, 255, 0.11808));
background-image: linear-gradient(to left, rgba(255, 34, 255, 0.07088), rgba(255, 255, 255, 0.11808));
}
.wrapper-1 .circ:nth-child(7) {
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(right, rgba(2, 195, 255, 0.11091), rgba(255, 225, 255, 0.07331));
background-image: linear-gradient(to left, rgba(2, 195, 255, 0.11091), rgba(255, 225, 255, 0.07331));
}
.wrapper-1 .circ:nth-child(8) {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: -3s;
animation-delay: -3s;
background-image: -webkit-linear-gradient(right, rgba(151, 255, 83, 0.11023), rgba(255, 255, 255, 0.14422));
background-image: linear-gradient(to left, rgba(151, 255, 83, 0.11023), rgba(255, 255, 255, 0.14422));
}
.wrapper-1 .circ:nth-child(9) {
-webkit-animation-duration: 14s;
animation-duration: 14s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(239, 19, 210, 0.10918), rgba(255, 175, 255, 0.12088));
background-image: linear-gradient(to left, rgba(239, 19, 210, 0.10918), rgba(255, 175, 255, 0.12088));
}
.wrapper-1 .circ:nth-child(10) {
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 156, 115, 0.07243), rgba(255, 192, 11, 0.12979));
background-image: linear-gradient(to top, rgba(255, 156, 115, 0.07243), rgba(255, 192, 11, 0.12979));
}
.wrapper-1 .circ:nth-child(11) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 228, 255, 0.05414), rgba(255, 140, 255, 0.05778));
background-image: linear-gradient(to top, rgba(255, 228, 255, 0.05414), rgba(255, 140, 255, 0.05778));
}
.wrapper-1 .circ:nth-child(12) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.11799), rgba(255, 26, 76, 0.14752));
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.11799), rgba(255, 26, 76, 0.14752));
}
.wrapper-1 .circ:nth-child(13) {
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 198, 255, 0.08888), rgba(255, 43, 255, 0.12161));
background-image: linear-gradient(to top, rgba(255, 198, 255, 0.08888), rgba(255, 43, 255, 0.12161));
}
.wrapper-1 .circ:nth-child(14) {
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(255, 219, 86, 0.13461), rgba(255, 225, 255, 0.06918));
background-image: linear-gradient(to left, rgba(255, 219, 86, 0.13461), rgba(255, 225, 255, 0.06918));
}
.wrapper-1 .circ:nth-child(15) {
-webkit-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(left, rgba(255, 208, 255, 0.10841), rgba(119, 200, 132, 0.06241));
background-image: linear-gradient(to right, rgba(255, 208, 255, 0.10841), rgba(119, 200, 132, 0.06241));
}
.wrapper-1 .circ:nth-child(16) {
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.11312), rgba(255, 255, 38, 0.09311));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.11312), rgba(255, 255, 38, 0.09311));
}
.wrapper-1 .circ:nth-child(17) {
-webkit-animation-duration: 25s;
animation-duration: 25s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(left, rgba(217, 255, 182, 0.12939), rgba(164, 255, 255, 0.10978));
background-image: linear-gradient(to right, rgba(217, 255, 182, 0.12939), rgba(164, 255, 255, 0.10978));
}
.wrapper-1 .circ:nth-child(18) {
-webkit-animation-duration: 14s;
animation-duration: 14s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 185, 231, 0.05785), rgba(255, 223, 255, 0.12258));
background-image: linear-gradient(to top, rgba(255, 185, 231, 0.05785), rgba(255, 223, 255, 0.12258));
}
.wrapper-1 .circ:nth-child(19) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(top, rgba(140, 104, 255, 0.13912), rgba(255, 89, 255, 0.14619));
background-image: linear-gradient(to bottom, rgba(140, 104, 255, 0.13912), rgba(255, 89, 255, 0.14619));
}
.wrapper-1 .circ:nth-child(20) {
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(left, rgba(255, 207, 255, 0.09512), rgba(31, 95, 255, 0.14473));
background-image: linear-gradient(to right, rgba(255, 207, 255, 0.09512), rgba(31, 95, 255, 0.14473));
}
.wrapper-1 .circ:nth-child(21) {
-webkit-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.13085), rgba(255, 90, 255, 0.07486));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.13085), rgba(255, 90, 255, 0.07486));
}
.wrapper-1 .circ:nth-child(22) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 224, 255, 0.08919), rgba(134, 209, 48, 0.09687));
background-image: linear-gradient(to top, rgba(255, 224, 255, 0.08919), rgba(134, 209, 48, 0.09687));
}
.wrapper-1 .circ:nth-child(23) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(right, rgba(79, 91, 255, 0.1217), rgba(255, 184, 255, 0.10027));
background-image: linear-gradient(to left, rgba(79, 91, 255, 0.1217), rgba(255, 184, 255, 0.10027));
}
.wrapper-1 .circ:nth-child(24) {
-webkit-animation-duration: 23s;
animation-duration: 23s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(left, rgba(255, 135, 255, 0.05965), rgba(93, 90, 255, 0.10826));
background-image: linear-gradient(to right, rgba(255, 135, 255, 0.05965), rgba(93, 90, 255, 0.10826));
}
.wrapper-1 .circ:nth-child(25) {
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 230, 255, 0.06924), rgba(185, 25, 255, 0.11458));
background-image: linear-gradient(to top, rgba(255, 230, 255, 0.06924), rgba(185, 25, 255, 0.11458));
}
.wrapper-1 .circ:nth-child(26) {
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(left, rgba(36, 111, 255, 0.08825), rgba(83, 255, 24, 0.09352));
background-image: linear-gradient(to right, rgba(36, 111, 255, 0.08825), rgba(83, 255, 24, 0.09352));
}
.wrapper-1 .circ:nth-child(27) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(top, rgba(255, 167, 72, 0.14267), rgba(255, 104, 213, 0.10214));
background-image: linear-gradient(to bottom, rgba(255, 167, 72, 0.14267), rgba(255, 104, 213, 0.10214));
}
.wrapper-1 .circ:nth-child(28) {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: -8s;
animation-delay: -8s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 237, 30, 0.115), rgba(255, 116, 255, 0.10455));
background-image: linear-gradient(to top, rgba(255, 237, 30, 0.115), rgba(255, 116, 255, 0.10455));
}
.wrapper-1 .circ:nth-child(29) {
-webkit-animation-duration: 11s;
animation-duration: 11s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(top, rgba(225, 105, 255, 0.0722), rgba(255, 57, 255, 0.07256));
background-image: linear-gradient(to bottom, rgba(225, 105, 255, 0.0722), rgba(255, 57, 255, 0.07256));
}
.wrapper-1 .circ:nth-child(30) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(left, rgba(255, 177, 255, 0.08224), rgba(255, 160, 45, 0.14398));
background-image: linear-gradient(to right, rgba(255, 177, 255, 0.08224), rgba(255, 160, 45, 0.14398));
}
.wrapper-1 .circ:nth-child(31) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(left, rgba(255, 64, 114, 0.14742), rgba(255, 161, 160, 0.0644));
background-image: linear-gradient(to right, rgba(255, 64, 114, 0.14742), rgba(255, 161, 160, 0.0644));
}
.wrapper-1 .circ:nth-child(32) {
-webkit-animation-duration: 22s;
animation-duration: 22s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(top, rgba(255, 29, 1, 0.05603), rgba(255, 26, 88, 0.07474));
background-image: linear-gradient(to bottom, rgba(255, 29, 1, 0.05603), rgba(255, 26, 88, 0.07474));
}
.wrapper-1 .circ:nth-child(33) {
-webkit-animation-duration: 29s;
animation-duration: 29s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(left, rgba(255, 78, 255, 0.05182), rgba(255, 255, 42, 0.06984));
background-image: linear-gradient(to right, rgba(255, 78, 255, 0.05182), rgba(255, 255, 42, 0.06984));
}
.wrapper-1 .circ:nth-child(34) {
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(bottom, rgba(18, 255, 106, 0.06669), rgba(255, 5, 255, 0.13618));
background-image: linear-gradient(to top, rgba(18, 255, 106, 0.06669), rgba(255, 5, 255, 0.13618));
}
.wrapper-1 .circ:nth-child(35) {
-webkit-animation-duration: 25s;
animation-duration: 25s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(left, rgba(81, 255, 255, 0.14511), rgba(255, 255, 83, 0.0952));
background-image: linear-gradient(to right, rgba(81, 255, 255, 0.14511), rgba(255, 255, 83, 0.0952));
}
.wrapper-1 .circ:nth-child(36) {
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(left, rgba(127, 127, 43, 0.14457), rgba(255, 255, 255, 0.09787));
background-image: linear-gradient(to right, rgba(127, 127, 43, 0.14457), rgba(255, 255, 255, 0.09787));
}
.wrapper-2 .circ:nth-child(1) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 51, 0.05618), rgba(255, 255, 255, 0.06961));
background-image: linear-gradient(to top, rgba(255, 255, 51, 0.05618), rgba(255, 255, 255, 0.06961));
}
.wrapper-2 .circ:nth-child(2) {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.12643), rgba(255, 8, 255, 0.08074));
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.12643), rgba(255, 8, 255, 0.08074));
}
.wrapper-2 .circ:nth-child(3) {
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(bottom, rgba(58, 128, 255, 0.07667), rgba(33, 255, 255, 0.0996));
background-image: linear-gradient(to top, rgba(58, 128, 255, 0.07667), rgba(33, 255, 255, 0.0996));
}
.wrapper-2 .circ:nth-child(4) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 44, 13, 0.09576), rgba(255, 75, 255, 0.13044));
background-image: linear-gradient(to top, rgba(255, 44, 13, 0.09576), rgba(255, 75, 255, 0.13044));
}
.wrapper-2 .circ:nth-child(5) {
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(128, 255, 222, 0.07881), rgba(255, 152, 255, 0.13075));
background-image: linear-gradient(to left, rgba(128, 255, 222, 0.07881), rgba(255, 152, 255, 0.13075));
}
.wrapper-2 .circ:nth-child(6) {
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(255, 37, 255, 0.14137), rgba(110, 70, 212, 0.10799));
background-image: linear-gradient(to left, rgba(255, 37, 255, 0.14137), rgba(110, 70, 212, 0.10799));
}
.wrapper-2 .circ:nth-child(7) {
-webkit-animation-duration: 13s;
animation-duration: 13s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(right, rgba(229, 255, 211, 0.05664), rgba(255, 197, 255, 0.11598));
background-image: linear-gradient(to left, rgba(229, 255, 211, 0.05664), rgba(255, 197, 255, 0.11598));
}
.wrapper-2 .circ:nth-child(8) {
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(left, rgba(255, 123, 255, 0.08831), rgba(255, 79, 255, 0.13939));
background-image: linear-gradient(to right, rgba(255, 123, 255, 0.08831), rgba(255, 79, 255, 0.13939));
}
.wrapper-2 .circ:nth-child(9) {
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-delay: -3s;
animation-delay: -3s;
background-image: -webkit-linear-gradient(top, rgba(137, 1, 255, 0.10765), rgba(255, 255, 176, 0.13961));
background-image: linear-gradient(to bottom, rgba(137, 1, 255, 0.10765), rgba(255, 255, 176, 0.13961));
}
.wrapper-2 .circ:nth-child(10) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(left, rgba(255, 152, 255, 0.13796), rgba(255, 85, 255, 0.11298));
background-image: linear-gradient(to right, rgba(255, 152, 255, 0.13796), rgba(255, 85, 255, 0.11298));
}
.wrapper-2 .circ:nth-child(11) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(right, rgba(255, 4, 255, 0.0857), rgba(94, 116, 62, 0.11811));
background-image: linear-gradient(to left, rgba(255, 4, 255, 0.0857), rgba(94, 116, 62, 0.11811));
}
.wrapper-2 .circ:nth-child(12) {
-webkit-animation-duration: 14s;
animation-duration: 14s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(right, rgba(45, 189, 255, 0.12967), rgba(255, 255, 255, 0.12076));
background-image: linear-gradient(to left, rgba(45, 189, 255, 0.12967), rgba(255, 255, 255, 0.12076));
}
.wrapper-2 .circ:nth-child(13) {
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-delay: -8s;
animation-delay: -8s;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.09129), rgba(255, 222, 255, 0.05211));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.09129), rgba(255, 222, 255, 0.05211));
}
.wrapper-2 .circ:nth-child(14) {
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 113, 255, 0.07218), rgba(255, 255, 255, 0.06616));
background-image: linear-gradient(to top, rgba(255, 113, 255, 0.07218), rgba(255, 255, 255, 0.06616));
}
.wrapper-2 .circ:nth-child(15) {
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 184, 255, 0.10655), rgba(255, 255, 255, 0.12644));
background-image: linear-gradient(to top, rgba(255, 184, 255, 0.10655), rgba(255, 255, 255, 0.12644));
}
.wrapper-2 .circ:nth-child(16) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(top, rgba(55, 255, 91, 0.12267), rgba(255, 255, 221, 0.05997));
background-image: linear-gradient(to bottom, rgba(55, 255, 91, 0.12267), rgba(255, 255, 221, 0.05997));
}
.wrapper-2 .circ:nth-child(17) {
-webkit-animation-duration: 29s;
animation-duration: 29s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(255, 131, 255, 0.14116), rgba(116, 135, 255, 0.08986));
background-image: linear-gradient(to left, rgba(255, 131, 255, 0.14116), rgba(116, 135, 255, 0.08986));
}
.wrapper-2 .circ:nth-child(18) {
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(right, rgba(98, 255, 111, 0.09687), rgba(255, 101, 255, 0.11337));
background-image: linear-gradient(to left, rgba(98, 255, 111, 0.09687), rgba(255, 101, 255, 0.11337));
}
.wrapper-2 .circ:nth-child(19) {
-webkit-animation-duration: 8s;
animation-duration: 8s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(right, rgba(255, 47, 255, 0.13772), rgba(138, 241, 255, 0.08825));
background-image: linear-gradient(to left, rgba(255, 47, 255, 0.13772), rgba(138, 241, 255, 0.08825));
}
.wrapper-2 .circ:nth-child(20) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(top, rgba(255, 208, 223, 0.05832), rgba(255, 174, 255, 0.13056));
background-image: linear-gradient(to bottom, rgba(255, 208, 223, 0.05832), rgba(255, 174, 255, 0.13056));
}
.wrapper-2 .circ:nth-child(21) {
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(top, rgba(255, 32, 255, 0.12803), rgba(137, 255, 255, 0.06427));
background-image: linear-gradient(to bottom, rgba(255, 32, 255, 0.12803), rgba(137, 255, 255, 0.06427));
}
.wrapper-2 .circ:nth-child(22) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -8s;
animation-delay: -8s;
background-image: -webkit-linear-gradient(top, rgba(69, 255, 97, 0.10849), rgba(255, 115, 170, 0.05367));
background-image: linear-gradient(to bottom, rgba(69, 255, 97, 0.10849), rgba(255, 115, 170, 0.05367));
}
.wrapper-2 .circ:nth-child(23) {
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(bottom, rgba(246, 241, 255, 0.07497), rgba(86, 253, 255, 0.11177));
background-image: linear-gradient(to top, rgba(246, 241, 255, 0.07497), rgba(86, 253, 255, 0.11177));
}
.wrapper-2 .circ:nth-child(24) {
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.06378), rgba(255, 174, 255, 0.14211));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.06378), rgba(255, 174, 255, 0.14211));
}
.wrapper-2 .circ:nth-child(25) {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.0975), rgba(255, 255, 121, 0.13084));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.0975), rgba(255, 255, 121, 0.13084));
}
.wrapper-2 .circ:nth-child(26) {
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.10344), rgba(255, 46, 52, 0.12306));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.10344), rgba(255, 46, 52, 0.12306));
}
.wrapper-2 .circ:nth-child(27) {
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(right, rgba(139, 190, 255, 0.06987), rgba(255, 255, 255, 0.11912));
background-image: linear-gradient(to left, rgba(139, 190, 255, 0.06987), rgba(255, 255, 255, 0.11912));
}
.wrapper-2 .circ:nth-child(28) {
-webkit-animation-duration: 12s;
animation-duration: 12s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
background-image: -webkit-linear-gradient(left, rgba(255, 238, 255, 0.07287), rgba(255, 102, 11, 0.09723));
background-image: linear-gradient(to right, rgba(255, 238, 255, 0.07287), rgba(255, 102, 11, 0.09723));
}
.wrapper-2 .circ:nth-child(29) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(left, rgba(255, 26, 255, 0.11134), rgba(116, 177, 255, 0.09935));
background-image: linear-gradient(to right, rgba(255, 26, 255, 0.11134), rgba(116, 177, 255, 0.09935));
}
.wrapper-2 .circ:nth-child(30) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.10722), rgba(255, 37, 255, 0.14747));
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.10722), rgba(255, 37, 255, 0.14747));
}
.wrapper-2 .circ:nth-child(31) {
-webkit-animation-duration: 13s;
animation-duration: 13s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(right, rgba(92, 217, 255, 0.13646), rgba(255, 255, 129, 0.10398));
background-image: linear-gradient(to left, rgba(92, 217, 255, 0.13646), rgba(255, 255, 129, 0.10398));
}
.wrapper-2 .circ:nth-child(32) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 240, 255, 0.08156), rgba(255, 255, 255, 0.06237));
background-image: linear-gradient(to top, rgba(255, 240, 255, 0.08156), rgba(255, 255, 255, 0.06237));
}
.wrapper-2 .circ:nth-child(33) {
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
background-image: -webkit-linear-gradient(bottom, rgba(209, 77, 150, 0.10718), rgba(255, 230, 255, 0.07199));
background-image: linear-gradient(to top, rgba(209, 77, 150, 0.10718), rgba(255, 230, 255, 0.07199));
}
.wrapper-2 .circ:nth-child(34) {
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(right, rgba(255, 124, 56, 0.1067), rgba(255, 76, 117, 0.14059));
background-image: linear-gradient(to left, rgba(255, 124, 56, 0.1067), rgba(255, 76, 117, 0.14059));
}
.wrapper-2 .circ:nth-child(35) {
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(top, rgba(255, 191, 255, 0.08171), rgba(255, 45, 255, 0.14267));
background-image: linear-gradient(to bottom, rgba(255, 191, 255, 0.08171), rgba(255, 45, 255, 0.14267));
}
.wrapper-2 .circ:nth-child(36) {
-webkit-animation-duration: 16s;
animation-duration: 16s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.08033), rgba(255, 255, 255, 0.11544));
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.08033), rgba(255, 255, 255, 0.11544));
}
.wrapper-3 .circ:nth-child(1) {
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -8s;
animation-delay: -8s;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 151, 0.0877), rgba(255, 255, 73, 0.09923));
background-image: linear-gradient(to bottom, rgba(255, 255, 151, 0.0877), rgba(255, 255, 73, 0.09923));
}
.wrapper-3 .circ:nth-child(2) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(bottom, rgba(200, 231, 255, 0.0881), rgba(255, 255, 238, 0.10654));
background-image: linear-gradient(to top, rgba(200, 231, 255, 0.0881), rgba(255, 255, 238, 0.10654));
}
.wrapper-3 .circ:nth-child(3) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(right, rgba(134, 200, 171, 0.11795), rgba(255, 187, 255, 0.0588));
background-image: linear-gradient(to left, rgba(134, 200, 171, 0.11795), rgba(255, 187, 255, 0.0588));
}
.wrapper-3 .circ:nth-child(4) {
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 13, 255, 0.11315), rgba(116, 130, 255, 0.13804));
background-image: linear-gradient(to top, rgba(255, 13, 255, 0.11315), rgba(116, 130, 255, 0.13804));
}
.wrapper-3 .circ:nth-child(5) {
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 222, 255, 0.05407), rgba(167, 227, 255, 0.14863));
background-image: linear-gradient(to top, rgba(255, 222, 255, 0.05407), rgba(167, 227, 255, 0.14863));
}
.wrapper-3 .circ:nth-child(6) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(left, rgba(255, 186, 60, 0.05627), rgba(69, 14, 255, 0.13784));
background-image: linear-gradient(to right, rgba(255, 186, 60, 0.05627), rgba(69, 14, 255, 0.13784));
}
.wrapper-3 .circ:nth-child(7) {
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(bottom, rgba(231, 32, 255, 0.12769), rgba(255, 77, 4, 0.10212));
background-image: linear-gradient(to top, rgba(231, 32, 255, 0.12769), rgba(255, 77, 4, 0.10212));
}
.wrapper-3 .circ:nth-child(8) {
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(right, rgba(212, 198, 255, 0.14823), rgba(255, 119, 255, 0.14449));
background-image: linear-gradient(to left, rgba(212, 198, 255, 0.14823), rgba(255, 119, 255, 0.14449));
}
.wrapper-3 .circ:nth-child(9) {
-webkit-animation-duration: 12s;
animation-duration: 12s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(bottom, rgba(16, 255, 147, 0.07441), rgba(255, 229, 162, 0.11423));
background-image: linear-gradient(to top, rgba(16, 255, 147, 0.07441), rgba(255, 229, 162, 0.11423));
}
.wrapper-3 .circ:nth-child(10) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(right, rgba(255, 200, 227, 0.10285), rgba(255, 255, 50, 0.11794));
background-image: linear-gradient(to left, rgba(255, 200, 227, 0.10285), rgba(255, 255, 50, 0.11794));
}
.wrapper-3 .circ:nth-child(11) {
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 86, 84, 0.11061), rgba(255, 23, 4, 0.0612));
background-image: linear-gradient(to top, rgba(255, 86, 84, 0.11061), rgba(255, 23, 4, 0.0612));
}
.wrapper-3 .circ:nth-child(12) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(right, rgba(255, 46, 255, 0.06985), rgba(255, 255, 211, 0.14265));
background-image: linear-gradient(to left, rgba(255, 46, 255, 0.06985), rgba(255, 255, 211, 0.14265));
}
.wrapper-3 .circ:nth-child(13) {
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(bottom, rgba(219, 188, 255, 0.07435), rgba(255, 118, 238, 0.12754));
background-image: linear-gradient(to top, rgba(219, 188, 255, 0.07435), rgba(255, 118, 238, 0.12754));
}
.wrapper-3 .circ:nth-child(14) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -9s;
animation-delay: -9s;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 40, 0.06251), rgba(62, 255, 236, 0.06932));
background-image: linear-gradient(to right, rgba(255, 255, 40, 0.06251), rgba(62, 255, 236, 0.06932));
}
.wrapper-3 .circ:nth-child(15) {
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(255, 102, 255, 0.14517), rgba(255, 255, 255, 0.0565));
background-image: linear-gradient(to left, rgba(255, 102, 255, 0.14517), rgba(255, 255, 255, 0.0565));
}
.wrapper-3 .circ:nth-child(16) {
-webkit-animation-duration: 26s;
animation-duration: 26s;
-webkit-animation-delay: -7s;
animation-delay: -7s;
background-image: -webkit-linear-gradient(left, rgba(152, 93, 255, 0.13742), rgba(160, 239, 205, 0.13857));
background-image: linear-gradient(to right, rgba(152, 93, 255, 0.13742), rgba(160, 239, 205, 0.13857));
}
.wrapper-3 .circ:nth-child(17) {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: -10s;
animation-delay: -10s;
background-image: -webkit-linear-gradient(top, rgba(255, 18, 255, 0.10542), rgba(255, 255, 255, 0.06755));
background-image: linear-gradient(to bottom, rgba(255, 18, 255, 0.10542), rgba(255, 255, 255, 0.06755));
}
.wrapper-3 .circ:nth-child(18) {
-webkit-animation-duration: 11s;
animation-duration: 11s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(left, rgba(255, 87, 255, 0.11251), rgba(255, 152, 252, 0.09243));
background-image: linear-gradient(to right, rgba(255, 87, 255, 0.11251), rgba(255, 152, 252, 0.09243));
}
.wrapper-3 .circ:nth-child(19) {
-webkit-animation-duration: 18s;
animation-duration: 18s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 65, 255, 0.1215), rgba(255, 182, 255, 0.12641));
background-image: linear-gradient(to top, rgba(255, 65, 255, 0.1215), rgba(255, 182, 255, 0.12641));
}
.wrapper-3 .circ:nth-child(20) {
-webkit-animation-duration: 28s;
animation-duration: 28s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(top, rgba(255, 217, 255, 0.07512), rgba(87, 193, 255, 0.099));
background-image: linear-gradient(to bottom, rgba(255, 217, 255, 0.07512), rgba(87, 193, 255, 0.099));
}
.wrapper-3 .circ:nth-child(21) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -11s;
animation-delay: -11s;
background-image: -webkit-linear-gradient(left, rgba(122, 81, 255, 0.12419), rgba(255, 255, 255, 0.11786));
background-image: linear-gradient(to right, rgba(122, 81, 255, 0.12419), rgba(255, 255, 255, 0.11786));
}
.wrapper-3 .circ:nth-child(22) {
-webkit-animation-duration: 17s;
animation-duration: 17s;
-webkit-animation-delay: -12s;
animation-delay: -12s;
background-image: -webkit-linear-gradient(top, rgba(255, 97, 255, 0.08266), rgba(255, 189, 15, 0.0979));
background-image: linear-gradient(to bottom, rgba(255, 97, 255, 0.08266), rgba(255, 189, 15, 0.0979));
}
.wrapper-3 .circ:nth-child(23) {
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -5s;
animation-delay: -5s;
background-image: -webkit-linear-gradient(right, rgba(141, 202, 255, 0.12421), rgba(27, 95, 255, 0.05099));
background-image: linear-gradient(to left, rgba(141, 202, 255, 0.12421), rgba(27, 95, 255, 0.05099));
}
.wrapper-3 .circ:nth-child(24) {
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
background-image: -webkit-linear-gradient(right, rgba(255, 192, 77, 0.09349), rgba(255, 255, 152, 0.11345));
background-image: linear-gradient(to left, rgba(255, 192, 77, 0.09349), rgba(255, 255, 152, 0.11345));
}
.wrapper-3 .circ:nth-child(25) {
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(left, rgba(255, 193, 232, 0.12901), rgba(255, 96, 255, 0.12219));
background-image: linear-gradient(to right, rgba(255, 193, 232, 0.12901), rgba(255, 96, 255, 0.12219));
}
.wrapper-3 .circ:nth-child(26) {
-webkit-animation-duration: 21s;
animation-duration: 21s;
-webkit-animation-delay: -8s;
animation-delay: -8s;
background-image: -webkit-linear-gradient(left, rgba(238, 72, 151, 0.10669), rgba(243, 87, 255, 0.13226));
background-image: linear-gradient(to right, rgba(238, 72, 151, 0.10669), rgba(243, 87, 255, 0.13226));
}
.wrapper-3 .circ:nth-child(27) {
-webkit-animation-duration: 14s;
animation-duration: 14s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.10731), rgba(255, 80, 255, 0.11534));
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.10731), rgba(255, 80, 255, 0.11534));
}
.wrapper-3 .circ:nth-child(28) {
-webkit-animation-duration: 23s;
animation-duration: 23s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.14746), rgba(94, 181, 236, 0.14432));
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.14746), rgba(94, 181, 236, 0.14432));
}
.wrapper-3 .circ:nth-child(29) {
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(bottom, rgba(255, 91, 255, 0.07608), rgba(147, 47, 252, 0.10131));
background-image: linear-gradient(to top, rgba(255, 91, 255, 0.07608), rgba(147, 47, 252, 0.10131));
}
.wrapper-3 .circ:nth-child(30) {
-webkit-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-delay: -1s;
animation-delay: -1s;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.08847), rgba(43, 238, 255, 0.09566));
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.08847), rgba(43, 238, 255, 0.09566));
}
.wrapper-3 .circ:nth-child(31) {
-webkit-animation-duration: 24s;
animation-duration: 24s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(left, rgba(249, 175, 255, 0.09525), rgba(239, 193, 255, 0.10615));
background-image: linear-gradient(to right, rgba(249, 175, 255, 0.09525), rgba(239, 193, 255, 0.10615));
}
.wrapper-3 .circ:nth-child(32) {
-webkit-animation-duration: 16s;
animation-duration: 16s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(189, 255, 255, 0.07358), rgba(255, 173, 255, 0.07534));
background-image: linear-gradient(to left, rgba(189, 255, 255, 0.07358), rgba(255, 173, 255, 0.07534));
}
.wrapper-3 .circ:nth-child(33) {
-webkit-animation-duration: 13s;
animation-duration: 13s;
-webkit-animation-delay: -4s;
animation-delay: -4s;
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.14661), rgba(82, 255, 255, 0.12572));
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.14661), rgba(82, 255, 255, 0.12572));
}
.wrapper-3 .circ:nth-child(34) {
-webkit-animation-duration: 19s;
animation-duration: 19s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.07501), rgba(255, 255, 255, 0.14512));
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07501), rgba(255, 255, 255, 0.14512));
}
.wrapper-3 .circ:nth-child(35) {
-webkit-animation-duration: 13s;
animation-duration: 13s;
-webkit-animation-delay: -2s;
animation-delay: -2s;
background-image: -webkit-linear-gradient(bottom, rgba(174, 223, 255, 0.10147), rgba(255, 136, 255, 0.11504));
background-image: linear-gradient(to top, rgba(174, 223, 255, 0.10147), rgba(255, 136, 255, 0.11504));
}
.wrapper-3 .circ:nth-child(36) {
-webkit-animation-duration: 27s;
animation-duration: 27s;
-webkit-animation-delay: -6s;
animation-delay: -6s;
background-image: -webkit-linear-gradient(right, rgba(255, 99, 255, 0.09351), rgba(72, 190, 255, 0.09031));
background-image: linear-gradient(to left, rgba(255, 99, 255, 0.09351), rgba(72, 190, 255, 0.09031));
}
@-webkit-keyframes rotateBoth {
to {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes rotateBoth {
to {
-webkit-transform: rotateX(360deg) rotateY(360deg);
transform: rotateX(360deg) rotateY(360deg);
}
}
@-webkit-keyframes rotateLessX {
to {
-webkit-transform: rotateX(180deg) rotateY(360deg);
transform: rotateX(180deg) rotateY(360deg);
}
}
@keyframes rotateLessX {
to {
-webkit-transform: rotateX(180deg) rotateY(360deg);
transform: rotateX(180deg) rotateY(360deg);
}
}
@-webkit-keyframes rotateLessY {
to {
-webkit-transform: rotateX(360deg) rotateY(180deg);
transform: rotateX(360deg) rotateY(180deg);
}
}
@keyframes rotateLessY {
to {
-webkit-transform: rotateX(360deg) rotateY(180deg);
transform: rotateX(360deg) rotateY(180deg);
}
}
html 透明的圆形,CSS3 花蝴蝶形状的3D透明圆球旋转变幻相关推荐
- html 透明的圆形,从div中切出的透明半圆
使用SVG: 这里有一个使用SVG的替代解决方案(尽管您还没有标记它).使用SVG的优点是:与径向梯度相比,它具有更好的浏览器支持. SVG可以支持图像内部的形状,不像盒阴影的方法. 虽然<=I ...
- android自定义透明圆形,Android progressdialog自定义背景透明的圆形进度条类似于Dialog...
很高兴能为大家分享一个背景是透明的圆形进度,先开效果图 效果图如下: 效果图 实现方法如下: 首先准备自己要定义成哪样子的效果的图片. 圆形进度条 1.创建Dialog的代码,你可以自己封装成一个方法 ...
- 满屏飞舞的心HTML动画,CSS3制作蝴蝶飞舞动画
CSS3制作蝴蝶飞舞动画 body{ background-color: lightblue; } #container { perspective: 600px; perspective-origi ...
- 十分钟实现炫酷透明计算器，CSS3+JavaScript实现3D炫酷计算器
B站视频:https://www.bilibili.com/video/BV1Kp4y167iX 十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器 今天带大家实现了一个炫酷的 ...
- CSS3的2D转换和3D转换，你了解了嘛？
css3的2D转换和3D转换 CSS3大纲: 本次讲解css3带来了两种转换:2D转换和3D转换 1. 2D转换 转换( transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移(tr ...
- HTML5 CSS3 专题 诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- [css] 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
[css] 当使用opacity时会使得元素的子元素也透明,此时不想要子元素也跟着透明怎么办? 当父元素使用opacity时,子元素也会继承该透明度,即使重新设置透明度也不行.楼上的两种方法要么是放弃 ...
最新文章
- 《科学美国人》：美国应保持太空、网络、生物领域的科技优势
- 一个python程序员需要掌握的知识-Python程序员鲜为人知但你应该知道的17个问题...
- python struct模块_python struct 模块
- HDLBits答案(4)_如何避免生成锁存器？
- Leetcode贪心 验证回文字符串
- 百度地图API如何申请？（自认为比较详细，如解决了你的问题请收藏、点赞、关注！）
- 如果王思聪是产品经理
- 【SCIRLab】ACL20 基于图注意力网络的多粒度机器阅读理解文档建模
- ue4加载本地版本_ue4本地服务器
- 怎么检测硬盘是否有坏道
- [面试专题]前端需要知道的web安全知识
- html查看蛋白质,怎么查询蛋白质的全部信息-- UniProKB数据库
- 平时开发搜集的一些网址
- Python 魔方方法
- QPainter 绘制的旋转中心问题
- java对象克隆效率_fastclone
- STC8A单片机应用开发
- 剧场版动画《巨虫列岛》1月上映决定！
- 2013电大c语言程序设计,2013年一月电大考试C语言程序设计(A)
- 视频监控系统的管理服务器,视频监控中管理服务器的配置