html 透明的圆形,CSS3 花蝴蝶形状的3D透明圆球旋转变幻

最新推荐文章于 2022-08-28 19:00:53 发布
最新推荐文章于 2022-08-28 19:00:53 发布
阅读量268 收藏
点赞数
文章标签： html 透明的圆形

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);

}

}

weixin_39556853
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML背景渐变圆圈,6种CSS3平滑过渡的渐变背景颜色
weixin_29846499的博客
06-02 1451
这是一款使用纯CSS3制作的平滑过渡的渐变背景颜色示例效果。背景渐变效果分别使用CSS3圆形渐变和线性渐变来完成。使用方法HTML结构第一种背景渐变效果的HTML结构如下：GlowCSS样式所有的背景渐变效果的通用CSS代码如下：.samples div {text-shadow: 0px 1px 0px rgb(204, 204, 204), 0px 2px 0px rgb(201, 201, ...
canvas效果案例：透明球
07-12 269
canvas效果案例：透明球 1.1随机生成球 1.1.1球的大小 1.1.2球的颜色 1.1.3球心的位置 1.1.4每个球的步长（x,y） 1.2 随机生成的球都是一个对象，将其数据存储至数组当中 1.3 每一帧都清除画布，重新循环数组中的每个球，绘制到画布上 1.4 移动的区间范围是固定的，因此每个球都需要判断其（圆心的位置 + 半径）是否超出了可视范围，如果超出了则需要反向...
淘宝响应式的代码精华
qq_30133609的博客
08-05 915
!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>540&&(a=540*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[nam
（纯css3实现）3d效果----环中心球形图片旋转 中心球形图片前面的元素透明度为1 图片后面透明度为0.1
weixin_57145577的博客
08-31 2517
图片示例 html <!-- 转动区域 --> <section id="slideshow"> <div class="entire-content"> <div class="content-carrousel"> <div class="shadow" v-for="(item,index) in funList" @click="toPage(item)"> <svg-icon :icon-class="item
【我的前端】前端项目小练习：CSS创建3D圆柱旋转效果
生产队的刘同学
08-28 2179
CSS创建3D旋转圆柱
css的rotate3d实现炫酷的圆环转动动画
热门推荐
苏苏就是小苏苏的博客
08-28 1万+
css的rotate3d实现炫酷的圆环转动动画
纯CSS实现旋转相册-3D旋转-悬停效果.html
04-18
这是一个使用纯CSS实现的旋转相册，通过CSS3的transform属性实现3D旋转和悬停效果。页面中包含一个div容器，其中包含多个img标签，每个img标签代表一个相册图片。通过设置容器的transform-style属性为preserve-3d，...
html,js,css+流星3D旋转相册
04-24
情人节送女朋友的流星3D旋转相册，独属理科人的浪漫。 需要注意：1.网页html请使用Microsoft edge或者QQ浏览器打开。 2.照片在img里替换，名字为从1到10依次编号，拓展名统一使用gif，故也可以显 示gif动图。照片...
Html5+CSS3实现3D旋转效果
04-16
Html5+js+CSS3实现3D旋转效果
利用CSS3制作简单的3d半透明立方体图片展示
09-24
主要给大家介绍了利用CSS3制作简单的3d半透明立方体图片展示的相关资料，文中给出了完整的示例代码，对大家的理解和学习具有一定的参考价值，需要的朋友们下面来一起看看吧。
HTML5+css3：3D旋转木马效果相册
01-21
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到，就是perspective和tranlateY 效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转...
html画布画出圆圈向外扩散,CSS3向外扩散的圆
weixin_35708531的博客
06-09 681
无标题文档@keyframes warn {0% {transform: scale(0);opacity: 0.0;}25% {transform: scale(0);opacity: 0.1;}50% {transform: scale(0.1);opacity: 0.3;}75% {transform: scale(0.5);opacity: 0.5;}100% {transform: sc...
html 透明的圆形,用CSS3剪出透明圆圈
weixin_28868927的博客
06-15 672
可以使用框阴影仅使用CSS制作剪切圆。以下演示具有固定的高度/宽度，但可以使用百分比大小获得相同的输出，从而使其响应：DEMO输出：body{background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);background-size:cover;}div{width:600px; height:350px;overfl...
html5实现圆圈里带一个三角形,CSS3 画基本图形，圆形、椭圆形、三角形等
weixin_35851515的博客
05-31 822
CSS3 画基本图形，圆形、椭圆形、三角形等发布时间：2016-09-20 16:25:53 作者：佚名 我要评论这篇文章主要介绍了CSS3 画基本图形，圆形、椭圆形、三角形等的相关资料,需要的朋友可以参考下CSS3 圆形#css3-circle{width: 150px;height: 150px;border-radius: 50%;background-color: #232323...
HTML背景渐变圆圈,CSS3 基础（1）——边框圆角背景渐变
weixin_42120405的博客
06-02 666
css3 简介CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。一些最重要CSS3模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局CSS3边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序1、盒阴影{box-shadow: 10px 10px 5px #888888; /*左右 上下 阴影程度 颜色*/}2、边界图片{...
CSS3+H5水波扩散特效
勤快的小蚂蚁的博客
05-27 2006
扩散特效 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>扩散特效</title> <style> @keyframes warn { 0% ...
css 圆圈 虚线,CSS3 个人介绍卡片 圆形虚线边框头像
weixin_36218360的博客
08-03 332
CSS语言：CSSSCSS确定*,*:after,*:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}body {background: #181a1c;font-family: 'Open Sans';font-weight: 400;}.contact-hold...
CSS3 实现圆圈动态发光特效动画的制作
weixin_72303943的博客
07-21 3432
CSS3 实现圆圈动态发光特效动画的制作
css空心圆代码,透明空心或切圆圈
weixin_36339710的博客
08-04 3111
您可以使用两种不同的技术实现透明切割圆：1.SVG以下示例使用内联svg。第一个片段使用蒙版元素剪切透明圆圈，第二个空心圆圈使用路径元素。圆圈由2个弧命令组成：使用mask元素：body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}...
用HTML5和CSS3实现3D立体旋转相册
最新发布
06-03
首先，我们需要一个包含所有图片的容器，然后通过CSS3的transform属性来实现3D旋转效果。 以下是一个基本的HTML结构： ``` <img src="image3.jpg"> ``` 然后，我们需要为容器和每...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值