CSS Breathing Particle Orb

Developer
Paul Sullivan
Size
8,158 Kb
Views
4,048
  1. CSS Breathing Particle Orb Previews
  2. CSS Breathing Particle Orb HTML Codes
  3. CSS Breathing Particle Orb CSS Codes

How do I make an css breathing particle orb?

What is a css breathing particle orb? How do you make a css breathing particle orb? This script and codes were developed by Paul Sullivan on 26 January 2023, Thursday.

CSS Breathing Particle Orb Previews
IQ Test

CSS Breathing Particle Orb - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Breathing Particle Orb</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li> <li> <div class='plate'></div> </li>
</ul>
</body>
</html>

CSS Breathing Particle Orb - Script Codes CSS Codes

html { background-color: #333; overflow: hidden;
}
body { padding-top: 90%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1500px; perspective: 1500px;
}
ul { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 2500px; perspective: 2500px; position: fixed; top: 50%; left: 50%; -webkit-animation: zoom 7s ease-in-out infinite; animation: zoom 7s ease-in-out infinite;
}
ul li { height: 1px; width: 50px; -webkit-transform-origin: 0%; transform-origin: 0%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
ul li .plate { position: absolute; right: 0; height: 15px; width: 15px; border-radius: 50%; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg);
}
@-webkit-keyframes zoom { 50% { -webkit-transform: translateZ(-1500px); transform: translateZ(-1500px); }
}
@keyframes zoom { 50% { -webkit-transform: translateZ(-1500px); transform: translateZ(-1500px); }
}
li:nth-child(1) { -webkit-transform: rotateZ(10deg) rotateX(207deg) rotateY(199deg); transform: rotateZ(10deg) rotateX(207deg) rotateY(199deg); -webkit-animation: height 25000ms -89720ms ease-in-out infinite; animation: height 25000ms -89720ms ease-in-out infinite;
}
li:nth-child(1) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@-webkit-keyframes height { 50% { width: 34vw; }
}
@keyframes height { 50% { width: 34vw; }
}
li:nth-child(2) { -webkit-transform: rotateZ(34deg) rotateX(25deg) rotateY(106deg); transform: rotateZ(34deg) rotateX(25deg) rotateY(106deg); -webkit-animation: height 25000ms -71407ms ease-in-out infinite; animation: height 25000ms -71407ms ease-in-out infinite;
}
li:nth-child(2) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(3) { -webkit-transform: rotateZ(123deg) rotateX(322deg) rotateY(187deg); transform: rotateZ(123deg) rotateX(322deg) rotateY(187deg); -webkit-animation: height 25000ms -8378ms ease-in-out infinite; animation: height 25000ms -8378ms ease-in-out infinite;
}
li:nth-child(3) .plate { background-color: rgba(26, 115, 179, 0.95);
}
@keyframes height { 50% { width: 42vw; }
}
li:nth-child(4) { -webkit-transform: rotateZ(211deg) rotateX(281deg) rotateY(58deg); transform: rotateZ(211deg) rotateX(281deg) rotateY(58deg); -webkit-animation: height 25000ms -31202ms ease-in-out infinite; animation: height 25000ms -31202ms ease-in-out infinite;
}
li:nth-child(4) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(5) { -webkit-transform: rotateZ(239deg) rotateX(18deg) rotateY(203deg); transform: rotateZ(239deg) rotateX(18deg) rotateY(203deg); -webkit-animation: height 25000ms -28487ms ease-in-out infinite; animation: height 25000ms -28487ms ease-in-out infinite;
}
li:nth-child(5) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(6) { -webkit-transform: rotateZ(174deg) rotateX(22deg) rotateY(25deg); transform: rotateZ(174deg) rotateX(22deg) rotateY(25deg); -webkit-animation: height 25000ms -47323ms ease-in-out infinite; animation: height 25000ms -47323ms ease-in-out infinite;
}
li:nth-child(6) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(7) { -webkit-transform: rotateZ(266deg) rotateX(240deg) rotateY(103deg); transform: rotateZ(266deg) rotateX(240deg) rotateY(103deg); -webkit-animation: height 25000ms -60356ms ease-in-out infinite; animation: height 25000ms -60356ms ease-in-out infinite;
}
li:nth-child(7) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(8) { -webkit-transform: rotateZ(318deg) rotateX(241deg) rotateY(79deg); transform: rotateZ(318deg) rotateX(241deg) rotateY(79deg); -webkit-animation: height 25000ms -9700ms ease-in-out infinite; animation: height 25000ms -9700ms ease-in-out infinite;
}
li:nth-child(8) .plate { background-color: rgba(26, 138, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(9) { -webkit-transform: rotateZ(170deg) rotateX(100deg) rotateY(349deg); transform: rotateZ(170deg) rotateX(100deg) rotateY(349deg); -webkit-animation: height 25000ms -64661ms ease-in-out infinite; animation: height 25000ms -64661ms ease-in-out infinite;
}
li:nth-child(9) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(10) { -webkit-transform: rotateZ(19deg) rotateX(258deg) rotateY(191deg); transform: rotateZ(19deg) rotateX(258deg) rotateY(191deg); -webkit-animation: height 25000ms -36215ms ease-in-out infinite; animation: height 25000ms -36215ms ease-in-out infinite;
}
li:nth-child(10) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(11) { -webkit-transform: rotateZ(49deg) rotateX(262deg) rotateY(25deg); transform: rotateZ(49deg) rotateX(262deg) rotateY(25deg); -webkit-animation: height 25000ms -80248ms ease-in-out infinite; animation: height 25000ms -80248ms ease-in-out infinite;
}
li:nth-child(11) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(12) { -webkit-transform: rotateZ(213deg) rotateX(296deg) rotateY(269deg); transform: rotateZ(213deg) rotateX(296deg) rotateY(269deg); -webkit-animation: height 25000ms -25594ms ease-in-out infinite; animation: height 25000ms -25594ms ease-in-out infinite;
}
li:nth-child(12) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(13) { -webkit-transform: rotateZ(182deg) rotateX(225deg) rotateY(54deg); transform: rotateZ(182deg) rotateX(225deg) rotateY(54deg); -webkit-animation: height 25000ms -59907ms ease-in-out infinite; animation: height 25000ms -59907ms ease-in-out infinite;
}
li:nth-child(13) .plate { background-color: rgba(26, 110, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(14) { -webkit-transform: rotateZ(124deg) rotateX(263deg) rotateY(308deg); transform: rotateZ(124deg) rotateX(263deg) rotateY(308deg); -webkit-animation: height 25000ms -48479ms ease-in-out infinite; animation: height 25000ms -48479ms ease-in-out infinite;
}
li:nth-child(14) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(15) { -webkit-transform: rotateZ(221deg) rotateX(199deg) rotateY(76deg); transform: rotateZ(221deg) rotateX(199deg) rotateY(76deg); -webkit-animation: height 25000ms -15752ms ease-in-out infinite; animation: height 25000ms -15752ms ease-in-out infinite;
}
li:nth-child(15) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(16) { -webkit-transform: rotateZ(250deg) rotateX(246deg) rotateY(140deg); transform: rotateZ(250deg) rotateX(246deg) rotateY(140deg); -webkit-animation: height 25000ms -97929ms ease-in-out infinite; animation: height 25000ms -97929ms ease-in-out infinite;
}
li:nth-child(16) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(17) { -webkit-transform: rotateZ(113deg) rotateX(52deg) rotateY(10deg); transform: rotateZ(113deg) rotateX(52deg) rotateY(10deg); -webkit-animation: height 25000ms -51305ms ease-in-out infinite; animation: height 25000ms -51305ms ease-in-out infinite;
}
li:nth-child(17) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(18) { -webkit-transform: rotateZ(347deg) rotateX(298deg) rotateY(260deg); transform: rotateZ(347deg) rotateX(298deg) rotateY(260deg); -webkit-animation: height 25000ms -777ms ease-in-out infinite; animation: height 25000ms -777ms ease-in-out infinite;
}
li:nth-child(18) .plate { background-color: rgba(26, 77, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(19) { -webkit-transform: rotateZ(30deg) rotateX(30deg) rotateY(265deg); transform: rotateZ(30deg) rotateX(30deg) rotateY(265deg); -webkit-animation: height 25000ms -17302ms ease-in-out infinite; animation: height 25000ms -17302ms ease-in-out infinite;
}
li:nth-child(19) .plate { background-color: rgba(26, 135, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(20) { -webkit-transform: rotateZ(347deg) rotateX(212deg) rotateY(224deg); transform: rotateZ(347deg) rotateX(212deg) rotateY(224deg); -webkit-animation: height 25000ms -88205ms ease-in-out infinite; animation: height 25000ms -88205ms ease-in-out infinite;
}
li:nth-child(20) .plate { background-color: rgba(26, 117, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(21) { -webkit-transform: rotateZ(251deg) rotateX(63deg) rotateY(256deg); transform: rotateZ(251deg) rotateX(63deg) rotateY(256deg); -webkit-animation: height 25000ms -33783ms ease-in-out infinite; animation: height 25000ms -33783ms ease-in-out infinite;
}
li:nth-child(21) .plate { background-color: rgba(26, 148, 179, 0.95);
}
@keyframes height { 50% { width: 42vw; }
}
li:nth-child(22) { -webkit-transform: rotateZ(210deg) rotateX(114deg) rotateY(341deg); transform: rotateZ(210deg) rotateX(114deg) rotateY(341deg); -webkit-animation: height 25000ms -43958ms ease-in-out infinite; animation: height 25000ms -43958ms ease-in-out infinite;
}
li:nth-child(22) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 41vw; }
}
li:nth-child(23) { -webkit-transform: rotateZ(261deg) rotateX(256deg) rotateY(360deg); transform: rotateZ(261deg) rotateX(256deg) rotateY(360deg); -webkit-animation: height 25000ms -85799ms ease-in-out infinite; animation: height 25000ms -85799ms ease-in-out infinite;
}
li:nth-child(23) .plate { background-color: rgba(26, 89, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(24) { -webkit-transform: rotateZ(38deg) rotateX(52deg) rotateY(125deg); transform: rotateZ(38deg) rotateX(52deg) rotateY(125deg); -webkit-animation: height 25000ms -49163ms ease-in-out infinite; animation: height 25000ms -49163ms ease-in-out infinite;
}
li:nth-child(24) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 41vw; }
}
li:nth-child(25) { -webkit-transform: rotateZ(297deg) rotateX(3deg) rotateY(23deg); transform: rotateZ(297deg) rotateX(3deg) rotateY(23deg); -webkit-animation: height 25000ms -38179ms ease-in-out infinite; animation: height 25000ms -38179ms ease-in-out infinite;
}
li:nth-child(25) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(26) { -webkit-transform: rotateZ(147deg) rotateX(119deg) rotateY(226deg); transform: rotateZ(147deg) rotateX(119deg) rotateY(226deg); -webkit-animation: height 25000ms -46253ms ease-in-out infinite; animation: height 25000ms -46253ms ease-in-out infinite;
}
li:nth-child(26) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 46vw; }
}
li:nth-child(27) { -webkit-transform: rotateZ(80deg) rotateX(345deg) rotateY(165deg); transform: rotateZ(80deg) rotateX(345deg) rotateY(165deg); -webkit-animation: height 25000ms -89294ms ease-in-out infinite; animation: height 25000ms -89294ms ease-in-out infinite;
}
li:nth-child(27) .plate { background-color: rgba(26, 77, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(28) { -webkit-transform: rotateZ(15deg) rotateX(200deg) rotateY(247deg); transform: rotateZ(15deg) rotateX(200deg) rotateY(247deg); -webkit-animation: height 25000ms -16502ms ease-in-out infinite; animation: height 25000ms -16502ms ease-in-out infinite;
}
li:nth-child(28) .plate { background-color: rgba(26, 77, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(29) { -webkit-transform: rotateZ(131deg) rotateX(167deg) rotateY(290deg); transform: rotateZ(131deg) rotateX(167deg) rotateY(290deg); -webkit-animation: height 25000ms -93021ms ease-in-out infinite; animation: height 25000ms -93021ms ease-in-out infinite;
}
li:nth-child(29) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 46vw; }
}
li:nth-child(30) { -webkit-transform: rotateZ(52deg) rotateX(3deg) rotateY(338deg); transform: rotateZ(52deg) rotateX(3deg) rotateY(338deg); -webkit-animation: height 25000ms -44871ms ease-in-out infinite; animation: height 25000ms -44871ms ease-in-out infinite;
}
li:nth-child(30) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(31) { -webkit-transform: rotateZ(194deg) rotateX(237deg) rotateY(114deg); transform: rotateZ(194deg) rotateX(237deg) rotateY(114deg); -webkit-animation: height 25000ms -35804ms ease-in-out infinite; animation: height 25000ms -35804ms ease-in-out infinite;
}
li:nth-child(31) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 36vw; }
}
li:nth-child(32) { -webkit-transform: rotateZ(319deg) rotateX(328deg) rotateY(40deg); transform: rotateZ(319deg) rotateX(328deg) rotateY(40deg); -webkit-animation: height 25000ms -59922ms ease-in-out infinite; animation: height 25000ms -59922ms ease-in-out infinite;
}
li:nth-child(32) .plate { background-color: rgba(26, 115, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(33) { -webkit-transform: rotateZ(190deg) rotateX(116deg) rotateY(346deg); transform: rotateZ(190deg) rotateX(116deg) rotateY(346deg); -webkit-animation: height 25000ms -65944ms ease-in-out infinite; animation: height 25000ms -65944ms ease-in-out infinite;
}
li:nth-child(33) .plate { background-color: rgba(26, 140, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(34) { -webkit-transform: rotateZ(231deg) rotateX(246deg) rotateY(341deg); transform: rotateZ(231deg) rotateX(246deg) rotateY(341deg); -webkit-animation: height 25000ms -64749ms ease-in-out infinite; animation: height 25000ms -64749ms ease-in-out infinite;
}
li:nth-child(34) .plate { background-color: rgba(26, 89, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(35) { -webkit-transform: rotateZ(211deg) rotateX(72deg) rotateY(339deg); transform: rotateZ(211deg) rotateX(72deg) rotateY(339deg); -webkit-animation: height 25000ms -25290ms ease-in-out infinite; animation: height 25000ms -25290ms ease-in-out infinite;
}
li:nth-child(35) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(36) { -webkit-transform: rotateZ(335deg) rotateX(119deg) rotateY(90deg); transform: rotateZ(335deg) rotateX(119deg) rotateY(90deg); -webkit-animation: height 25000ms -99219ms ease-in-out infinite; animation: height 25000ms -99219ms ease-in-out infinite;
}
li:nth-child(36) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 43vw; }
}
li:nth-child(37) { -webkit-transform: rotateZ(175deg) rotateX(219deg) rotateY(97deg); transform: rotateZ(175deg) rotateX(219deg) rotateY(97deg); -webkit-animation: height 25000ms -71254ms ease-in-out infinite; animation: height 25000ms -71254ms ease-in-out infinite;
}
li:nth-child(37) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(38) { -webkit-transform: rotateZ(335deg) rotateX(39deg) rotateY(349deg); transform: rotateZ(335deg) rotateX(39deg) rotateY(349deg); -webkit-animation: height 25000ms -30947ms ease-in-out infinite; animation: height 25000ms -30947ms ease-in-out infinite;
}
li:nth-child(38) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(39) { -webkit-transform: rotateZ(213deg) rotateX(223deg) rotateY(224deg); transform: rotateZ(213deg) rotateX(223deg) rotateY(224deg); -webkit-animation: height 25000ms -89498ms ease-in-out infinite; animation: height 25000ms -89498ms ease-in-out infinite;
}
li:nth-child(39) .plate { background-color: rgba(26, 89, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(40) { -webkit-transform: rotateZ(172deg) rotateX(42deg) rotateY(36deg); transform: rotateZ(172deg) rotateX(42deg) rotateY(36deg); -webkit-animation: height 25000ms -71602ms ease-in-out infinite; animation: height 25000ms -71602ms ease-in-out infinite;
}
li:nth-child(40) .plate { background-color: rgba(26, 120, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(41) { -webkit-transform: rotateZ(259deg) rotateX(284deg) rotateY(254deg); transform: rotateZ(259deg) rotateX(284deg) rotateY(254deg); -webkit-animation: height 25000ms -35017ms ease-in-out infinite; animation: height 25000ms -35017ms ease-in-out infinite;
}
li:nth-child(41) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(42) { -webkit-transform: rotateZ(250deg) rotateX(211deg) rotateY(113deg); transform: rotateZ(250deg) rotateX(211deg) rotateY(113deg); -webkit-animation: height 25000ms -45483ms ease-in-out infinite; animation: height 25000ms -45483ms ease-in-out infinite;
}
li:nth-child(42) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(43) { -webkit-transform: rotateZ(56deg) rotateX(121deg) rotateY(169deg); transform: rotateZ(56deg) rotateX(121deg) rotateY(169deg); -webkit-animation: height 25000ms -66389ms ease-in-out infinite; animation: height 25000ms -66389ms ease-in-out infinite;
}
li:nth-child(43) .plate { background-color: rgba(26, 112, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(44) { -webkit-transform: rotateZ(198deg) rotateX(200deg) rotateY(155deg); transform: rotateZ(198deg) rotateX(200deg) rotateY(155deg); -webkit-animation: height 25000ms -36032ms ease-in-out infinite; animation: height 25000ms -36032ms ease-in-out infinite;
}
li:nth-child(44) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 41vw; }
}
li:nth-child(45) { -webkit-transform: rotateZ(227deg) rotateX(125deg) rotateY(357deg); transform: rotateZ(227deg) rotateX(125deg) rotateY(357deg); -webkit-animation: height 25000ms -68600ms ease-in-out infinite; animation: height 25000ms -68600ms ease-in-out infinite;
}
li:nth-child(45) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(46) { -webkit-transform: rotateZ(48deg) rotateX(8deg) rotateY(44deg); transform: rotateZ(48deg) rotateX(8deg) rotateY(44deg); -webkit-animation: height 25000ms -58365ms ease-in-out infinite; animation: height 25000ms -58365ms ease-in-out infinite;
}
li:nth-child(46) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(47) { -webkit-transform: rotateZ(230deg) rotateX(116deg) rotateY(152deg); transform: rotateZ(230deg) rotateX(116deg) rotateY(152deg); -webkit-animation: height 25000ms -90286ms ease-in-out infinite; animation: height 25000ms -90286ms ease-in-out infinite;
}
li:nth-child(47) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(48) { -webkit-transform: rotateZ(216deg) rotateX(46deg) rotateY(193deg); transform: rotateZ(216deg) rotateX(46deg) rotateY(193deg); -webkit-animation: height 25000ms -59017ms ease-in-out infinite; animation: height 25000ms -59017ms ease-in-out infinite;
}
li:nth-child(48) .plate { background-color: rgba(26, 115, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(49) { -webkit-transform: rotateZ(180deg) rotateX(28deg) rotateY(178deg); transform: rotateZ(180deg) rotateX(28deg) rotateY(178deg); -webkit-animation: height 25000ms -61430ms ease-in-out infinite; animation: height 25000ms -61430ms ease-in-out infinite;
}
li:nth-child(49) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(50) { -webkit-transform: rotateZ(178deg) rotateX(326deg) rotateY(216deg); transform: rotateZ(178deg) rotateX(326deg) rotateY(216deg); -webkit-animation: height 25000ms -89499ms ease-in-out infinite; animation: height 25000ms -89499ms ease-in-out infinite;
}
li:nth-child(50) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 48vw; }
}
li:nth-child(51) { -webkit-transform: rotateZ(293deg) rotateX(330deg) rotateY(346deg); transform: rotateZ(293deg) rotateX(330deg) rotateY(346deg); -webkit-animation: height 25000ms -81789ms ease-in-out infinite; animation: height 25000ms -81789ms ease-in-out infinite;
}
li:nth-child(51) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(52) { -webkit-transform: rotateZ(79deg) rotateX(345deg) rotateY(33deg); transform: rotateZ(79deg) rotateX(345deg) rotateY(33deg); -webkit-animation: height 25000ms -28620ms ease-in-out infinite; animation: height 25000ms -28620ms ease-in-out infinite;
}
li:nth-child(52) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 36vw; }
}
li:nth-child(53) { -webkit-transform: rotateZ(298deg) rotateX(246deg) rotateY(124deg); transform: rotateZ(298deg) rotateX(246deg) rotateY(124deg); -webkit-animation: height 25000ms -45404ms ease-in-out infinite; animation: height 25000ms -45404ms ease-in-out infinite;
}
li:nth-child(53) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(54) { -webkit-transform: rotateZ(69deg) rotateX(16deg) rotateY(198deg); transform: rotateZ(69deg) rotateX(16deg) rotateY(198deg); -webkit-animation: height 25000ms -59476ms ease-in-out infinite; animation: height 25000ms -59476ms ease-in-out infinite;
}
li:nth-child(54) .plate { background-color: rgba(26, 107, 179, 0.95);
}
@keyframes height { 50% { width: 42vw; }
}
li:nth-child(55) { -webkit-transform: rotateZ(196deg) rotateX(45deg) rotateY(340deg); transform: rotateZ(196deg) rotateX(45deg) rotateY(340deg); -webkit-animation: height 25000ms -80056ms ease-in-out infinite; animation: height 25000ms -80056ms ease-in-out infinite;
}
li:nth-child(55) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(56) { -webkit-transform: rotateZ(272deg) rotateX(122deg) rotateY(89deg); transform: rotateZ(272deg) rotateX(122deg) rotateY(89deg); -webkit-animation: height 25000ms -5556ms ease-in-out infinite; animation: height 25000ms -5556ms ease-in-out infinite;
}
li:nth-child(56) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 48vw; }
}
li:nth-child(57) { -webkit-transform: rotateZ(236deg) rotateX(200deg) rotateY(131deg); transform: rotateZ(236deg) rotateX(200deg) rotateY(131deg); -webkit-animation: height 25000ms -85622ms ease-in-out infinite; animation: height 25000ms -85622ms ease-in-out infinite;
}
li:nth-child(57) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(58) { -webkit-transform: rotateZ(13deg) rotateX(164deg) rotateY(153deg); transform: rotateZ(13deg) rotateX(164deg) rotateY(153deg); -webkit-animation: height 25000ms -15562ms ease-in-out infinite; animation: height 25000ms -15562ms ease-in-out infinite;
}
li:nth-child(58) .plate { background-color: rgba(26, 89, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(59) { -webkit-transform: rotateZ(258deg) rotateX(239deg) rotateY(104deg); transform: rotateZ(258deg) rotateX(239deg) rotateY(104deg); -webkit-animation: height 25000ms -85141ms ease-in-out infinite; animation: height 25000ms -85141ms ease-in-out infinite;
}
li:nth-child(59) .plate { background-color: rgba(26, 92, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(60) { -webkit-transform: rotateZ(181deg) rotateX(243deg) rotateY(29deg); transform: rotateZ(181deg) rotateX(243deg) rotateY(29deg); -webkit-animation: height 25000ms -21092ms ease-in-out infinite; animation: height 25000ms -21092ms ease-in-out infinite;
}
li:nth-child(60) .plate { background-color: rgba(26, 107, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(61) { -webkit-transform: rotateZ(247deg) rotateX(255deg) rotateY(323deg); transform: rotateZ(247deg) rotateX(255deg) rotateY(323deg); -webkit-animation: height 25000ms -28810ms ease-in-out infinite; animation: height 25000ms -28810ms ease-in-out infinite;
}
li:nth-child(61) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(62) { -webkit-transform: rotateZ(237deg) rotateX(204deg) rotateY(101deg); transform: rotateZ(237deg) rotateX(204deg) rotateY(101deg); -webkit-animation: height 25000ms -84009ms ease-in-out infinite; animation: height 25000ms -84009ms ease-in-out infinite;
}
li:nth-child(62) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(63) { -webkit-transform: rotateZ(60deg) rotateX(324deg) rotateY(210deg); transform: rotateZ(60deg) rotateX(324deg) rotateY(210deg); -webkit-animation: height 25000ms -97394ms ease-in-out infinite; animation: height 25000ms -97394ms ease-in-out infinite;
}
li:nth-child(63) .plate { background-color: rgba(26, 112, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(64) { -webkit-transform: rotateZ(243deg) rotateX(165deg) rotateY(117deg); transform: rotateZ(243deg) rotateX(165deg) rotateY(117deg); -webkit-animation: height 25000ms -77515ms ease-in-out infinite; animation: height 25000ms -77515ms ease-in-out infinite;
}
li:nth-child(64) .plate { background-color: rgba(26, 117, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(65) { -webkit-transform: rotateZ(157deg) rotateX(308deg) rotateY(66deg); transform: rotateZ(157deg) rotateX(308deg) rotateY(66deg); -webkit-animation: height 25000ms -72065ms ease-in-out infinite; animation: height 25000ms -72065ms ease-in-out infinite;
}
li:nth-child(65) .plate { background-color: rgba(26, 89, 179, 0.95);
}
@keyframes height { 50% { width: 41vw; }
}
li:nth-child(66) { -webkit-transform: rotateZ(325deg) rotateX(281deg) rotateY(248deg); transform: rotateZ(325deg) rotateX(281deg) rotateY(248deg); -webkit-animation: height 25000ms -80473ms ease-in-out infinite; animation: height 25000ms -80473ms ease-in-out infinite;
}
li:nth-child(66) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(67) { -webkit-transform: rotateZ(5deg) rotateX(73deg) rotateY(273deg); transform: rotateZ(5deg) rotateX(73deg) rotateY(273deg); -webkit-animation: height 25000ms -59907ms ease-in-out infinite; animation: height 25000ms -59907ms ease-in-out infinite;
}
li:nth-child(67) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 31vw; }
}
li:nth-child(68) { -webkit-transform: rotateZ(312deg) rotateX(11deg) rotateY(55deg); transform: rotateZ(312deg) rotateX(11deg) rotateY(55deg); -webkit-animation: height 25000ms -6120ms ease-in-out infinite; animation: height 25000ms -6120ms ease-in-out infinite;
}
li:nth-child(68) .plate { background-color: rgba(26, 135, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(69) { -webkit-transform: rotateZ(103deg) rotateX(205deg) rotateY(342deg); transform: rotateZ(103deg) rotateX(205deg) rotateY(342deg); -webkit-animation: height 25000ms -81033ms ease-in-out infinite; animation: height 25000ms -81033ms ease-in-out infinite;
}
li:nth-child(69) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(70) { -webkit-transform: rotateZ(45deg) rotateX(222deg) rotateY(180deg); transform: rotateZ(45deg) rotateX(222deg) rotateY(180deg); -webkit-animation: height 25000ms -3055ms ease-in-out infinite; animation: height 25000ms -3055ms ease-in-out infinite;
}
li:nth-child(70) .plate { background-color: rgba(26, 135, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(71) { -webkit-transform: rotateZ(314deg) rotateX(324deg) rotateY(169deg); transform: rotateZ(314deg) rotateX(324deg) rotateY(169deg); -webkit-animation: height 25000ms -61408ms ease-in-out infinite; animation: height 25000ms -61408ms ease-in-out infinite;
}
li:nth-child(71) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(72) { -webkit-transform: rotateZ(67deg) rotateX(30deg) rotateY(176deg); transform: rotateZ(67deg) rotateX(30deg) rotateY(176deg); -webkit-animation: height 25000ms -67403ms ease-in-out infinite; animation: height 25000ms -67403ms ease-in-out infinite;
}
li:nth-child(72) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(73) { -webkit-transform: rotateZ(38deg) rotateX(333deg) rotateY(91deg); transform: rotateZ(38deg) rotateX(333deg) rotateY(91deg); -webkit-animation: height 25000ms -17075ms ease-in-out infinite; animation: height 25000ms -17075ms ease-in-out infinite;
}
li:nth-child(73) .plate { background-color: rgba(26, 128, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(74) { -webkit-transform: rotateZ(152deg) rotateX(160deg) rotateY(198deg); transform: rotateZ(152deg) rotateX(160deg) rotateY(198deg); -webkit-animation: height 25000ms -22259ms ease-in-out infinite; animation: height 25000ms -22259ms ease-in-out infinite;
}
li:nth-child(74) .plate { background-color: rgba(26, 105, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(75) { -webkit-transform: rotateZ(91deg) rotateX(257deg) rotateY(336deg); transform: rotateZ(91deg) rotateX(257deg) rotateY(336deg); -webkit-animation: height 25000ms -41698ms ease-in-out infinite; animation: height 25000ms -41698ms ease-in-out infinite;
}
li:nth-child(75) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 31vw; }
}
li:nth-child(76) { -webkit-transform: rotateZ(348deg) rotateX(64deg) rotateY(255deg); transform: rotateZ(348deg) rotateX(64deg) rotateY(255deg); -webkit-animation: height 25000ms -84207ms ease-in-out infinite; animation: height 25000ms -84207ms ease-in-out infinite;
}
li:nth-child(76) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(77) { -webkit-transform: rotateZ(83deg) rotateX(273deg) rotateY(70deg); transform: rotateZ(83deg) rotateX(273deg) rotateY(70deg); -webkit-animation: height 25000ms -78397ms ease-in-out infinite; animation: height 25000ms -78397ms ease-in-out infinite;
}
li:nth-child(77) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(78) { -webkit-transform: rotateZ(350deg) rotateX(57deg) rotateY(312deg); transform: rotateZ(350deg) rotateX(57deg) rotateY(312deg); -webkit-animation: height 25000ms -23411ms ease-in-out infinite; animation: height 25000ms -23411ms ease-in-out infinite;
}
li:nth-child(78) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 48vw; }
}
li:nth-child(79) { -webkit-transform: rotateZ(247deg) rotateX(204deg) rotateY(214deg); transform: rotateZ(247deg) rotateX(204deg) rotateY(214deg); -webkit-animation: height 25000ms -67618ms ease-in-out infinite; animation: height 25000ms -67618ms ease-in-out infinite;
}
li:nth-child(79) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(80) { -webkit-transform: rotateZ(152deg) rotateX(254deg) rotateY(329deg); transform: rotateZ(152deg) rotateX(254deg) rotateY(329deg); -webkit-animation: height 25000ms -15310ms ease-in-out infinite; animation: height 25000ms -15310ms ease-in-out infinite;
}
li:nth-child(80) .plate { background-color: rgba(26, 112, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(81) { -webkit-transform: rotateZ(345deg) rotateX(266deg) rotateY(321deg); transform: rotateZ(345deg) rotateX(266deg) rotateY(321deg); -webkit-animation: height 25000ms -44178ms ease-in-out infinite; animation: height 25000ms -44178ms ease-in-out infinite;
}
li:nth-child(81) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(82) { -webkit-transform: rotateZ(141deg) rotateX(201deg) rotateY(30deg); transform: rotateZ(141deg) rotateX(201deg) rotateY(30deg); -webkit-animation: height 25000ms -32559ms ease-in-out infinite; animation: height 25000ms -32559ms ease-in-out infinite;
}
li:nth-child(82) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(83) { -webkit-transform: rotateZ(124deg) rotateX(52deg) rotateY(77deg); transform: rotateZ(124deg) rotateX(52deg) rotateY(77deg); -webkit-animation: height 25000ms -5815ms ease-in-out infinite; animation: height 25000ms -5815ms ease-in-out infinite;
}
li:nth-child(83) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(84) { -webkit-transform: rotateZ(99deg) rotateX(47deg) rotateY(22deg); transform: rotateZ(99deg) rotateX(47deg) rotateY(22deg); -webkit-animation: height 25000ms -49926ms ease-in-out infinite; animation: height 25000ms -49926ms ease-in-out infinite;
}
li:nth-child(84) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(85) { -webkit-transform: rotateZ(115deg) rotateX(232deg) rotateY(70deg); transform: rotateZ(115deg) rotateX(232deg) rotateY(70deg); -webkit-animation: height 25000ms -19997ms ease-in-out infinite; animation: height 25000ms -19997ms ease-in-out infinite;
}
li:nth-child(85) .plate { background-color: rgba(26, 107, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(86) { -webkit-transform: rotateZ(143deg) rotateX(103deg) rotateY(226deg); transform: rotateZ(143deg) rotateX(103deg) rotateY(226deg); -webkit-animation: height 25000ms -5623ms ease-in-out infinite; animation: height 25000ms -5623ms ease-in-out infinite;
}
li:nth-child(86) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(87) { -webkit-transform: rotateZ(132deg) rotateX(85deg) rotateY(305deg); transform: rotateZ(132deg) rotateX(85deg) rotateY(305deg); -webkit-animation: height 25000ms -26585ms ease-in-out infinite; animation: height 25000ms -26585ms ease-in-out infinite;
}
li:nth-child(87) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(88) { -webkit-transform: rotateZ(104deg) rotateX(226deg) rotateY(100deg); transform: rotateZ(104deg) rotateX(226deg) rotateY(100deg); -webkit-animation: height 25000ms -49041ms ease-in-out infinite; animation: height 25000ms -49041ms ease-in-out infinite;
}
li:nth-child(88) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(89) { -webkit-transform: rotateZ(77deg) rotateX(44deg) rotateY(212deg); transform: rotateZ(77deg) rotateX(44deg) rotateY(212deg); -webkit-animation: height 25000ms -78964ms ease-in-out infinite; animation: height 25000ms -78964ms ease-in-out infinite;
}
li:nth-child(89) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(90) { -webkit-transform: rotateZ(344deg) rotateX(127deg) rotateY(87deg); transform: rotateZ(344deg) rotateX(127deg) rotateY(87deg); -webkit-animation: height 25000ms -45259ms ease-in-out infinite; animation: height 25000ms -45259ms ease-in-out infinite;
}
li:nth-child(90) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(91) { -webkit-transform: rotateZ(303deg) rotateX(138deg) rotateY(118deg); transform: rotateZ(303deg) rotateX(138deg) rotateY(118deg); -webkit-animation: height 25000ms -32964ms ease-in-out infinite; animation: height 25000ms -32964ms ease-in-out infinite;
}
li:nth-child(91) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 34vw; }
}
li:nth-child(92) { -webkit-transform: rotateZ(355deg) rotateX(305deg) rotateY(27deg); transform: rotateZ(355deg) rotateX(305deg) rotateY(27deg); -webkit-animation: height 25000ms -80818ms ease-in-out infinite; animation: height 25000ms -80818ms ease-in-out infinite;
}
li:nth-child(92) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 42vw; }
}
li:nth-child(93) { -webkit-transform: rotateZ(106deg) rotateX(243deg) rotateY(327deg); transform: rotateZ(106deg) rotateX(243deg) rotateY(327deg); -webkit-animation: height 25000ms -66292ms ease-in-out infinite; animation: height 25000ms -66292ms ease-in-out infinite;
}
li:nth-child(93) .plate { background-color: rgba(26, 145, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(94) { -webkit-transform: rotateZ(336deg) rotateX(199deg) rotateY(8deg); transform: rotateZ(336deg) rotateX(199deg) rotateY(8deg); -webkit-animation: height 25000ms -43735ms ease-in-out infinite; animation: height 25000ms -43735ms ease-in-out infinite;
}
li:nth-child(94) .plate { background-color: rgba(26, 117, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(95) { -webkit-transform: rotateZ(257deg) rotateX(206deg) rotateY(328deg); transform: rotateZ(257deg) rotateX(206deg) rotateY(328deg); -webkit-animation: height 25000ms -27134ms ease-in-out infinite; animation: height 25000ms -27134ms ease-in-out infinite;
}
li:nth-child(95) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 41vw; }
}
li:nth-child(96) { -webkit-transform: rotateZ(89deg) rotateX(353deg) rotateY(141deg); transform: rotateZ(89deg) rotateX(353deg) rotateY(141deg); -webkit-animation: height 25000ms -71411ms ease-in-out infinite; animation: height 25000ms -71411ms ease-in-out infinite;
}
li:nth-child(96) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(97) { -webkit-transform: rotateZ(170deg) rotateX(92deg) rotateY(22deg); transform: rotateZ(170deg) rotateX(92deg) rotateY(22deg); -webkit-animation: height 25000ms -41903ms ease-in-out infinite; animation: height 25000ms -41903ms ease-in-out infinite;
}
li:nth-child(97) .plate { background-color: rgba(26, 125, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(98) { -webkit-transform: rotateZ(53deg) rotateX(226deg) rotateY(99deg); transform: rotateZ(53deg) rotateX(226deg) rotateY(99deg); -webkit-animation: height 25000ms -82484ms ease-in-out infinite; animation: height 25000ms -82484ms ease-in-out infinite;
}
li:nth-child(98) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(99) { -webkit-transform: rotateZ(316deg) rotateX(5deg) rotateY(215deg); transform: rotateZ(316deg) rotateX(5deg) rotateY(215deg); -webkit-animation: height 25000ms -27715ms ease-in-out infinite; animation: height 25000ms -27715ms ease-in-out infinite;
}
li:nth-child(99) .plate { background-color: rgba(26, 145, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(100) { -webkit-transform: rotateZ(66deg) rotateX(248deg) rotateY(103deg); transform: rotateZ(66deg) rotateX(248deg) rotateY(103deg); -webkit-animation: height 25000ms -12987ms ease-in-out infinite; animation: height 25000ms -12987ms ease-in-out infinite;
}
li:nth-child(100) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(101) { -webkit-transform: rotateZ(230deg) rotateX(181deg) rotateY(53deg); transform: rotateZ(230deg) rotateX(181deg) rotateY(53deg); -webkit-animation: height 25000ms -52351ms ease-in-out infinite; animation: height 25000ms -52351ms ease-in-out infinite;
}
li:nth-child(101) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(102) { -webkit-transform: rotateZ(280deg) rotateX(29deg) rotateY(320deg); transform: rotateZ(280deg) rotateX(29deg) rotateY(320deg); -webkit-animation: height 25000ms -74886ms ease-in-out infinite; animation: height 25000ms -74886ms ease-in-out infinite;
}
li:nth-child(102) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(103) { -webkit-transform: rotateZ(40deg) rotateX(10deg) rotateY(55deg); transform: rotateZ(40deg) rotateX(10deg) rotateY(55deg); -webkit-animation: height 25000ms -11061ms ease-in-out infinite; animation: height 25000ms -11061ms ease-in-out infinite;
}
li:nth-child(103) .plate { background-color: rgba(26, 92, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(104) { -webkit-transform: rotateZ(42deg) rotateX(189deg) rotateY(330deg); transform: rotateZ(42deg) rotateX(189deg) rotateY(330deg); -webkit-animation: height 25000ms -25636ms ease-in-out infinite; animation: height 25000ms -25636ms ease-in-out infinite;
}
li:nth-child(104) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(105) { -webkit-transform: rotateZ(325deg) rotateX(225deg) rotateY(106deg); transform: rotateZ(325deg) rotateX(225deg) rotateY(106deg); -webkit-animation: height 25000ms -97077ms ease-in-out infinite; animation: height 25000ms -97077ms ease-in-out infinite;
}
li:nth-child(105) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(106) { -webkit-transform: rotateZ(110deg) rotateX(316deg) rotateY(309deg); transform: rotateZ(110deg) rotateX(316deg) rotateY(309deg); -webkit-animation: height 25000ms -58237ms ease-in-out infinite; animation: height 25000ms -58237ms ease-in-out infinite;
}
li:nth-child(106) .plate { background-color: rgba(26, 77, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(107) { -webkit-transform: rotateZ(89deg) rotateX(325deg) rotateY(154deg); transform: rotateZ(89deg) rotateX(325deg) rotateY(154deg); -webkit-animation: height 25000ms -99134ms ease-in-out infinite; animation: height 25000ms -99134ms ease-in-out infinite;
}
li:nth-child(107) .plate { background-color: rgba(26, 148, 179, 0.95);
}
@keyframes height { 50% { width: 41vw; }
}
li:nth-child(108) { -webkit-transform: rotateZ(158deg) rotateX(46deg) rotateY(164deg); transform: rotateZ(158deg) rotateX(46deg) rotateY(164deg); -webkit-animation: height 25000ms -47925ms ease-in-out infinite; animation: height 25000ms -47925ms ease-in-out infinite;
}
li:nth-child(108) .plate { background-color: rgba(26, 87, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(109) { -webkit-transform: rotateZ(199deg) rotateX(296deg) rotateY(48deg); transform: rotateZ(199deg) rotateX(296deg) rotateY(48deg); -webkit-animation: height 25000ms -87355ms ease-in-out infinite; animation: height 25000ms -87355ms ease-in-out infinite;
}
li:nth-child(109) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(110) { -webkit-transform: rotateZ(220deg) rotateX(247deg) rotateY(189deg); transform: rotateZ(220deg) rotateX(247deg) rotateY(189deg); -webkit-animation: height 25000ms -51857ms ease-in-out infinite; animation: height 25000ms -51857ms ease-in-out infinite;
}
li:nth-child(110) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 34vw; }
}
li:nth-child(111) { -webkit-transform: rotateZ(214deg) rotateX(41deg) rotateY(287deg); transform: rotateZ(214deg) rotateX(41deg) rotateY(287deg); -webkit-animation: height 25000ms -94897ms ease-in-out infinite; animation: height 25000ms -94897ms ease-in-out infinite;
}
li:nth-child(111) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(112) { -webkit-transform: rotateZ(169deg) rotateX(271deg) rotateY(331deg); transform: rotateZ(169deg) rotateX(271deg) rotateY(331deg); -webkit-animation: height 25000ms -43291ms ease-in-out infinite; animation: height 25000ms -43291ms ease-in-out infinite;
}
li:nth-child(112) .plate { background-color: rgba(26, 115, 179, 0.95);
}
@keyframes height { 50% { width: 42vw; }
}
li:nth-child(113) { -webkit-transform: rotateZ(116deg) rotateX(332deg) rotateY(198deg); transform: rotateZ(116deg) rotateX(332deg) rotateY(198deg); -webkit-animation: height 25000ms -5903ms ease-in-out infinite; animation: height 25000ms -5903ms ease-in-out infinite;
}
li:nth-child(113) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(114) { -webkit-transform: rotateZ(157deg) rotateX(225deg) rotateY(215deg); transform: rotateZ(157deg) rotateX(225deg) rotateY(215deg); -webkit-animation: height 25000ms -54313ms ease-in-out infinite; animation: height 25000ms -54313ms ease-in-out infinite;
}
li:nth-child(114) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(115) { -webkit-transform: rotateZ(105deg) rotateX(76deg) rotateY(221deg); transform: rotateZ(105deg) rotateX(76deg) rotateY(221deg); -webkit-animation: height 25000ms -10408ms ease-in-out infinite; animation: height 25000ms -10408ms ease-in-out infinite;
}
li:nth-child(115) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(116) { -webkit-transform: rotateZ(227deg) rotateX(4deg) rotateY(24deg); transform: rotateZ(227deg) rotateX(4deg) rotateY(24deg); -webkit-animation: height 25000ms -39982ms ease-in-out infinite; animation: height 25000ms -39982ms ease-in-out infinite;
}
li:nth-child(116) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 36vw; }
}
li:nth-child(117) { -webkit-transform: rotateZ(349deg) rotateX(237deg) rotateY(67deg); transform: rotateZ(349deg) rotateX(237deg) rotateY(67deg); -webkit-animation: height 25000ms -73111ms ease-in-out infinite; animation: height 25000ms -73111ms ease-in-out infinite;
}
li:nth-child(117) .plate { background-color: rgba(26, 107, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(118) { -webkit-transform: rotateZ(346deg) rotateX(171deg) rotateY(166deg); transform: rotateZ(346deg) rotateX(171deg) rotateY(166deg); -webkit-animation: height 25000ms -92693ms ease-in-out infinite; animation: height 25000ms -92693ms ease-in-out infinite;
}
li:nth-child(118) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 36vw; }
}
li:nth-child(119) { -webkit-transform: rotateZ(200deg) rotateX(105deg) rotateY(309deg); transform: rotateZ(200deg) rotateX(105deg) rotateY(309deg); -webkit-animation: height 25000ms -59937ms ease-in-out infinite; animation: height 25000ms -59937ms ease-in-out infinite;
}
li:nth-child(119) .plate { background-color: rgba(26, 105, 179, 0.95);
}
@keyframes height { 50% { width: 30vw; }
}
li:nth-child(120) { -webkit-transform: rotateZ(307deg) rotateX(118deg) rotateY(343deg); transform: rotateZ(307deg) rotateX(118deg) rotateY(343deg); -webkit-animation: height 25000ms -63002ms ease-in-out infinite; animation: height 25000ms -63002ms ease-in-out infinite;
}
li:nth-child(120) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(121) { -webkit-transform: rotateZ(286deg) rotateX(286deg) rotateY(260deg); transform: rotateZ(286deg) rotateX(286deg) rotateY(260deg); -webkit-animation: height 25000ms -57252ms ease-in-out infinite; animation: height 25000ms -57252ms ease-in-out infinite;
}
li:nth-child(121) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(122) { -webkit-transform: rotateZ(256deg) rotateX(205deg) rotateY(183deg); transform: rotateZ(256deg) rotateX(205deg) rotateY(183deg); -webkit-animation: height 25000ms -72938ms ease-in-out infinite; animation: height 25000ms -72938ms ease-in-out infinite;
}
li:nth-child(122) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 48vw; }
}
li:nth-child(123) { -webkit-transform: rotateZ(81deg) rotateX(360deg) rotateY(189deg); transform: rotateZ(81deg) rotateX(360deg) rotateY(189deg); -webkit-animation: height 25000ms -30454ms ease-in-out infinite; animation: height 25000ms -30454ms ease-in-out infinite;
}
li:nth-child(123) .plate { background-color: rgba(26, 112, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(124) { -webkit-transform: rotateZ(281deg) rotateX(325deg) rotateY(214deg); transform: rotateZ(281deg) rotateX(325deg) rotateY(214deg); -webkit-animation: height 25000ms -66572ms ease-in-out infinite; animation: height 25000ms -66572ms ease-in-out infinite;
}
li:nth-child(124) .plate { background-color: rgba(26, 138, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(125) { -webkit-transform: rotateZ(128deg) rotateX(293deg) rotateY(281deg); transform: rotateZ(128deg) rotateX(293deg) rotateY(281deg); -webkit-animation: height 25000ms -11496ms ease-in-out infinite; animation: height 25000ms -11496ms ease-in-out infinite;
}
li:nth-child(125) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(126) { -webkit-transform: rotateZ(54deg) rotateX(275deg) rotateY(105deg); transform: rotateZ(54deg) rotateX(275deg) rotateY(105deg); -webkit-animation: height 25000ms -40525ms ease-in-out infinite; animation: height 25000ms -40525ms ease-in-out infinite;
}
li:nth-child(126) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(127) { -webkit-transform: rotateZ(115deg) rotateX(110deg) rotateY(72deg); transform: rotateZ(115deg) rotateX(110deg) rotateY(72deg); -webkit-animation: height 25000ms -25948ms ease-in-out infinite; animation: height 25000ms -25948ms ease-in-out infinite;
}
li:nth-child(127) .plate { background-color: rgba(26, 140, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(128) { -webkit-transform: rotateZ(290deg) rotateX(252deg) rotateY(255deg); transform: rotateZ(290deg) rotateX(252deg) rotateY(255deg); -webkit-animation: height 25000ms -30107ms ease-in-out infinite; animation: height 25000ms -30107ms ease-in-out infinite;
}
li:nth-child(128) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 48vw; }
}
li:nth-child(129) { -webkit-transform: rotateZ(219deg) rotateX(108deg) rotateY(165deg); transform: rotateZ(219deg) rotateX(108deg) rotateY(165deg); -webkit-animation: height 25000ms -84586ms ease-in-out infinite; animation: height 25000ms -84586ms ease-in-out infinite;
}
li:nth-child(129) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 36vw; }
}
li:nth-child(130) { -webkit-transform: rotateZ(98deg) rotateX(22deg) rotateY(78deg); transform: rotateZ(98deg) rotateX(22deg) rotateY(78deg); -webkit-animation: height 25000ms -43860ms ease-in-out infinite; animation: height 25000ms -43860ms ease-in-out infinite;
}
li:nth-child(130) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(131) { -webkit-transform: rotateZ(224deg) rotateX(347deg) rotateY(95deg); transform: rotateZ(224deg) rotateX(347deg) rotateY(95deg); -webkit-animation: height 25000ms -99537ms ease-in-out infinite; animation: height 25000ms -99537ms ease-in-out infinite;
}
li:nth-child(131) .plate { background-color: rgba(26, 130, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(132) { -webkit-transform: rotateZ(316deg) rotateX(201deg) rotateY(28deg); transform: rotateZ(316deg) rotateX(201deg) rotateY(28deg); -webkit-animation: height 25000ms -63942ms ease-in-out infinite; animation: height 25000ms -63942ms ease-in-out infinite;
}
li:nth-child(132) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 48vw; }
}
li:nth-child(133) { -webkit-transform: rotateZ(198deg) rotateX(295deg) rotateY(212deg); transform: rotateZ(198deg) rotateX(295deg) rotateY(212deg); -webkit-animation: height 25000ms -12109ms ease-in-out infinite; animation: height 25000ms -12109ms ease-in-out infinite;
}
li:nth-child(133) .plate { background-color: rgba(26, 107, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(134) { -webkit-transform: rotateZ(15deg) rotateX(226deg) rotateY(155deg); transform: rotateZ(15deg) rotateX(226deg) rotateY(155deg); -webkit-animation: height 25000ms -50105ms ease-in-out infinite; animation: height 25000ms -50105ms ease-in-out infinite;
}
li:nth-child(134) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(135) { -webkit-transform: rotateZ(215deg) rotateX(96deg) rotateY(184deg); transform: rotateZ(215deg) rotateX(96deg) rotateY(184deg); -webkit-animation: height 25000ms -74469ms ease-in-out infinite; animation: height 25000ms -74469ms ease-in-out infinite;
}
li:nth-child(135) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 36vw; }
}
li:nth-child(136) { -webkit-transform: rotateZ(160deg) rotateX(338deg) rotateY(221deg); transform: rotateZ(160deg) rotateX(338deg) rotateY(221deg); -webkit-animation: height 25000ms -99952ms ease-in-out infinite; animation: height 25000ms -99952ms ease-in-out infinite;
}
li:nth-child(136) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(137) { -webkit-transform: rotateZ(311deg) rotateX(144deg) rotateY(71deg); transform: rotateZ(311deg) rotateX(144deg) rotateY(71deg); -webkit-animation: height 25000ms -22849ms ease-in-out infinite; animation: height 25000ms -22849ms ease-in-out infinite;
}
li:nth-child(137) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(138) { -webkit-transform: rotateZ(213deg) rotateX(128deg) rotateY(259deg); transform: rotateZ(213deg) rotateX(128deg) rotateY(259deg); -webkit-animation: height 25000ms -33409ms ease-in-out infinite; animation: height 25000ms -33409ms ease-in-out infinite;
}
li:nth-child(138) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 37vw; }
}
li:nth-child(139) { -webkit-transform: rotateZ(17deg) rotateX(118deg) rotateY(215deg); transform: rotateZ(17deg) rotateX(118deg) rotateY(215deg); -webkit-animation: height 25000ms -73112ms ease-in-out infinite; animation: height 25000ms -73112ms ease-in-out infinite;
}
li:nth-child(139) .plate { background-color: rgba(26, 110, 179, 0.95);
}
@keyframes height { 50% { width: 34vw; }
}
li:nth-child(140) { -webkit-transform: rotateZ(205deg) rotateX(32deg) rotateY(217deg); transform: rotateZ(205deg) rotateX(32deg) rotateY(217deg); -webkit-animation: height 25000ms -49249ms ease-in-out infinite; animation: height 25000ms -49249ms ease-in-out infinite;
}
li:nth-child(140) .plate { background-color: rgba(26, 110, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(141) { -webkit-transform: rotateZ(178deg) rotateX(169deg) rotateY(67deg); transform: rotateZ(178deg) rotateX(169deg) rotateY(67deg); -webkit-animation: height 25000ms -54877ms ease-in-out infinite; animation: height 25000ms -54877ms ease-in-out infinite;
}
li:nth-child(141) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 43vw; }
}
li:nth-child(142) { -webkit-transform: rotateZ(212deg) rotateX(342deg) rotateY(321deg); transform: rotateZ(212deg) rotateX(342deg) rotateY(321deg); -webkit-animation: height 25000ms -54493ms ease-in-out infinite; animation: height 25000ms -54493ms ease-in-out infinite;
}
li:nth-child(142) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(143) { -webkit-transform: rotateZ(240deg) rotateX(283deg) rotateY(234deg); transform: rotateZ(240deg) rotateX(283deg) rotateY(234deg); -webkit-animation: height 25000ms -54634ms ease-in-out infinite; animation: height 25000ms -54634ms ease-in-out infinite;
}
li:nth-child(143) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 49vw; }
}
li:nth-child(144) { -webkit-transform: rotateZ(349deg) rotateX(289deg) rotateY(275deg); transform: rotateZ(349deg) rotateX(289deg) rotateY(275deg); -webkit-animation: height 25000ms -24761ms ease-in-out infinite; animation: height 25000ms -24761ms ease-in-out infinite;
}
li:nth-child(144) .plate { background-color: rgba(26, 77, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(145) { -webkit-transform: rotateZ(115deg) rotateX(142deg) rotateY(296deg); transform: rotateZ(115deg) rotateX(142deg) rotateY(296deg); -webkit-animation: height 25000ms -93219ms ease-in-out infinite; animation: height 25000ms -93219ms ease-in-out infinite;
}
li:nth-child(145) .plate { background-color: rgba(26, 110, 179, 0.95);
}
@keyframes height { 50% { width: 39vw; }
}
li:nth-child(146) { -webkit-transform: rotateZ(112deg) rotateX(159deg) rotateY(22deg); transform: rotateZ(112deg) rotateX(159deg) rotateY(22deg); -webkit-animation: height 25000ms -63143ms ease-in-out infinite; animation: height 25000ms -63143ms ease-in-out infinite;
}
li:nth-child(146) .plate { background-color: rgba(26, 105, 179, 0.95);
}
@keyframes height { 50% { width: 31vw; }
}
li:nth-child(147) { -webkit-transform: rotateZ(102deg) rotateX(215deg) rotateY(85deg); transform: rotateZ(102deg) rotateX(215deg) rotateY(85deg); -webkit-animation: height 25000ms -39012ms ease-in-out infinite; animation: height 25000ms -39012ms ease-in-out infinite;
}
li:nth-child(147) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(148) { -webkit-transform: rotateZ(212deg) rotateX(44deg) rotateY(29deg); transform: rotateZ(212deg) rotateX(44deg) rotateY(29deg); -webkit-animation: height 25000ms -20653ms ease-in-out infinite; animation: height 25000ms -20653ms ease-in-out infinite;
}
li:nth-child(148) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
li:nth-child(149) { -webkit-transform: rotateZ(287deg) rotateX(215deg) rotateY(250deg); transform: rotateZ(287deg) rotateX(215deg) rotateY(250deg); -webkit-animation: height 25000ms -63501ms ease-in-out infinite; animation: height 25000ms -63501ms ease-in-out infinite;
}
li:nth-child(149) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(150) { -webkit-transform: rotateZ(225deg) rotateX(105deg) rotateY(213deg); transform: rotateZ(225deg) rotateX(105deg) rotateY(213deg); -webkit-animation: height 25000ms -99616ms ease-in-out infinite; animation: height 25000ms -99616ms ease-in-out infinite;
}
li:nth-child(150) .plate { background-color: rgba(26, 140, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(151) { -webkit-transform: rotateZ(200deg) rotateX(257deg) rotateY(327deg); transform: rotateZ(200deg) rotateX(257deg) rotateY(327deg); -webkit-animation: height 25000ms -39580ms ease-in-out infinite; animation: height 25000ms -39580ms ease-in-out infinite;
}
li:nth-child(151) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 46vw; }
}
li:nth-child(152) { -webkit-transform: rotateZ(346deg) rotateX(224deg) rotateY(110deg); transform: rotateZ(346deg) rotateX(224deg) rotateY(110deg); -webkit-animation: height 25000ms -68617ms ease-in-out infinite; animation: height 25000ms -68617ms ease-in-out infinite;
}
li:nth-child(152) .plate { background-color: rgba(26, 148, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(153) { -webkit-transform: rotateZ(218deg) rotateX(242deg) rotateY(214deg); transform: rotateZ(218deg) rotateX(242deg) rotateY(214deg); -webkit-animation: height 25000ms -68295ms ease-in-out infinite; animation: height 25000ms -68295ms ease-in-out infinite;
}
li:nth-child(153) .plate { background-color: rgba(26, 145, 179, 0.95);
}
@keyframes height { 50% { width: 43vw; }
}
li:nth-child(154) { -webkit-transform: rotateZ(238deg) rotateX(240deg) rotateY(349deg); transform: rotateZ(238deg) rotateX(240deg) rotateY(349deg); -webkit-animation: height 25000ms -27282ms ease-in-out infinite; animation: height 25000ms -27282ms ease-in-out infinite;
}
li:nth-child(154) .plate { background-color: rgba(26, 105, 179, 0.95);
}
@keyframes height { 50% { width: 43vw; }
}
li:nth-child(155) { -webkit-transform: rotateZ(146deg) rotateX(260deg) rotateY(70deg); transform: rotateZ(146deg) rotateX(260deg) rotateY(70deg); -webkit-animation: height 25000ms -64068ms ease-in-out infinite; animation: height 25000ms -64068ms ease-in-out infinite;
}
li:nth-child(155) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(156) { -webkit-transform: rotateZ(159deg) rotateX(134deg) rotateY(332deg); transform: rotateZ(159deg) rotateX(134deg) rotateY(332deg); -webkit-animation: height 25000ms -40354ms ease-in-out infinite; animation: height 25000ms -40354ms ease-in-out infinite;
}
li:nth-child(156) .plate { background-color: rgba(26, 153, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(157) { -webkit-transform: rotateZ(261deg) rotateX(88deg) rotateY(61deg); transform: rotateZ(261deg) rotateX(88deg) rotateY(61deg); -webkit-animation: height 25000ms -38285ms ease-in-out infinite; animation: height 25000ms -38285ms ease-in-out infinite;
}
li:nth-child(157) .plate { background-color: rgba(26, 115, 179, 0.95);
}
@keyframes height { 50% { width: 43vw; }
}
li:nth-child(158) { -webkit-transform: rotateZ(62deg) rotateX(28deg) rotateY(231deg); transform: rotateZ(62deg) rotateX(28deg) rotateY(231deg); -webkit-animation: height 25000ms -60434ms ease-in-out infinite; animation: height 25000ms -60434ms ease-in-out infinite;
}
li:nth-child(158) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(159) { -webkit-transform: rotateZ(69deg) rotateX(195deg) rotateY(343deg); transform: rotateZ(69deg) rotateX(195deg) rotateY(343deg); -webkit-animation: height 25000ms -30860ms ease-in-out infinite; animation: height 25000ms -30860ms ease-in-out infinite;
}
li:nth-child(159) .plate { background-color: rgba(26, 89, 179, 0.95);
}
@keyframes height { 50% { width: 44vw; }
}
li:nth-child(160) { -webkit-transform: rotateZ(334deg) rotateX(6deg) rotateY(49deg); transform: rotateZ(334deg) rotateX(6deg) rotateY(49deg); -webkit-animation: height 25000ms -41750ms ease-in-out infinite; animation: height 25000ms -41750ms ease-in-out infinite;
}
li:nth-child(160) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 47vw; }
}
li:nth-child(161) { -webkit-transform: rotateZ(220deg) rotateX(60deg) rotateY(345deg); transform: rotateZ(220deg) rotateX(60deg) rotateY(345deg); -webkit-animation: height 25000ms -51657ms ease-in-out infinite; animation: height 25000ms -51657ms ease-in-out infinite;
}
li:nth-child(161) .plate { background-color: rgba(26, 150, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(162) { -webkit-transform: rotateZ(243deg) rotateX(46deg) rotateY(174deg); transform: rotateZ(243deg) rotateX(46deg) rotateY(174deg); -webkit-animation: height 25000ms -49502ms ease-in-out infinite; animation: height 25000ms -49502ms ease-in-out infinite;
}
li:nth-child(162) .plate { background-color: rgba(26, 138, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(163) { -webkit-transform: rotateZ(306deg) rotateX(289deg) rotateY(338deg); transform: rotateZ(306deg) rotateX(289deg) rotateY(338deg); -webkit-animation: height 25000ms -99219ms ease-in-out infinite; animation: height 25000ms -99219ms ease-in-out infinite;
}
li:nth-child(163) .plate { background-color: rgba(26, 99, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(164) { -webkit-transform: rotateZ(313deg) rotateX(93deg) rotateY(197deg); transform: rotateZ(313deg) rotateX(93deg) rotateY(197deg); -webkit-animation: height 25000ms -32335ms ease-in-out infinite; animation: height 25000ms -32335ms ease-in-out infinite;
}
li:nth-child(164) .plate { background-color: rgba(26, 102, 179, 0.95);
}
@keyframes height { 50% { width: 43vw; }
}
li:nth-child(165) { -webkit-transform: rotateZ(291deg) rotateX(341deg) rotateY(90deg); transform: rotateZ(291deg) rotateX(341deg) rotateY(90deg); -webkit-animation: height 25000ms -28194ms ease-in-out infinite; animation: height 25000ms -28194ms ease-in-out infinite;
}
li:nth-child(165) .plate { background-color: rgba(26, 112, 179, 0.95);
}
@keyframes height { 50% { width: 50vw; }
}
li:nth-child(166) { -webkit-transform: rotateZ(15deg) rotateX(21deg) rotateY(16deg); transform: rotateZ(15deg) rotateX(21deg) rotateY(16deg); -webkit-animation: height 25000ms -15177ms ease-in-out infinite; animation: height 25000ms -15177ms ease-in-out infinite;
}
li:nth-child(166) .plate { background-color: rgba(26, 97, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(167) { -webkit-transform: rotateZ(334deg) rotateX(214deg) rotateY(338deg); transform: rotateZ(334deg) rotateX(214deg) rotateY(338deg); -webkit-animation: height 25000ms -6202ms ease-in-out infinite; animation: height 25000ms -6202ms ease-in-out infinite;
}
li:nth-child(167) .plate { background-color: rgba(26, 128, 179, 0.95);
}
@keyframes height { 50% { width: 46vw; }
}
li:nth-child(168) { -webkit-transform: rotateZ(327deg) rotateX(278deg) rotateY(48deg); transform: rotateZ(327deg) rotateX(278deg) rotateY(48deg); -webkit-animation: height 25000ms -92666ms ease-in-out infinite; animation: height 25000ms -92666ms ease-in-out infinite;
}
li:nth-child(168) .plate { background-color: rgba(26, 77, 179, 0.95);
}
@keyframes height { 50% { width: 35vw; }
}
li:nth-child(169) { -webkit-transform: rotateZ(71deg) rotateX(208deg) rotateY(58deg); transform: rotateZ(71deg) rotateX(208deg) rotateY(58deg); -webkit-animation: height 25000ms -88460ms ease-in-out infinite; animation: height 25000ms -88460ms ease-in-out infinite;
}
li:nth-child(169) .plate { background-color: rgba(26, 115, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(170) { -webkit-transform: rotateZ(160deg) rotateX(92deg) rotateY(309deg); transform: rotateZ(160deg) rotateX(92deg) rotateY(309deg); -webkit-animation: height 25000ms -59959ms ease-in-out infinite; animation: height 25000ms -59959ms ease-in-out infinite;
}
li:nth-child(170) .plate { background-color: rgba(26, 94, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(171) { -webkit-transform: rotateZ(50deg) rotateX(97deg) rotateY(43deg); transform: rotateZ(50deg) rotateX(97deg) rotateY(43deg); -webkit-animation: height 25000ms -17402ms ease-in-out infinite; animation: height 25000ms -17402ms ease-in-out infinite;
}
li:nth-child(171) .plate { background-color: rgba(26, 140, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(172) { -webkit-transform: rotateZ(297deg) rotateX(185deg) rotateY(344deg); transform: rotateZ(297deg) rotateX(185deg) rotateY(344deg); -webkit-animation: height 25000ms -33842ms ease-in-out infinite; animation: height 25000ms -33842ms ease-in-out infinite;
}
li:nth-child(172) .plate { background-color: rgba(26, 143, 179, 0.95);
}
@keyframes height { 50% { width: 34vw; }
}
li:nth-child(173) { -webkit-transform: rotateZ(44deg) rotateX(357deg) rotateY(62deg); transform: rotateZ(44deg) rotateX(357deg) rotateY(62deg); -webkit-animation: height 25000ms -42462ms ease-in-out infinite; animation: height 25000ms -42462ms ease-in-out infinite;
}
li:nth-child(173) .plate { background-color: rgba(26, 84, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(174) { -webkit-transform: rotateZ(189deg) rotateX(274deg) rotateY(98deg); transform: rotateZ(189deg) rotateX(274deg) rotateY(98deg); -webkit-animation: height 25000ms -36305ms ease-in-out infinite; animation: height 25000ms -36305ms ease-in-out infinite;
}
li:nth-child(174) .plate { background-color: rgba(26, 122, 179, 0.95);
}
@keyframes height { 50% { width: 40vw; }
}
li:nth-child(175) { -webkit-transform: rotateZ(187deg) rotateX(280deg) rotateY(286deg); transform: rotateZ(187deg) rotateX(280deg) rotateY(286deg); -webkit-animation: height 25000ms -55044ms ease-in-out infinite; animation: height 25000ms -55044ms ease-in-out infinite;
}
li:nth-child(175) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(176) { -webkit-transform: rotateZ(77deg) rotateX(251deg) rotateY(317deg); transform: rotateZ(77deg) rotateX(251deg) rotateY(317deg); -webkit-animation: height 25000ms -20721ms ease-in-out infinite; animation: height 25000ms -20721ms ease-in-out infinite;
}
li:nth-child(176) .plate { background-color: rgba(26, 110, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(177) { -webkit-transform: rotateZ(44deg) rotateX(199deg) rotateY(249deg); transform: rotateZ(44deg) rotateX(199deg) rotateY(249deg); -webkit-animation: height 25000ms -4146ms ease-in-out infinite; animation: height 25000ms -4146ms ease-in-out infinite;
}
li:nth-child(177) .plate { background-color: rgba(26, 79, 179, 0.95);
}
@keyframes height { 50% { width: 38vw; }
}
li:nth-child(178) { -webkit-transform: rotateZ(64deg) rotateX(47deg) rotateY(60deg); transform: rotateZ(64deg) rotateX(47deg) rotateY(60deg); -webkit-animation: height 25000ms -98152ms ease-in-out infinite; animation: height 25000ms -98152ms ease-in-out infinite;
}
li:nth-child(178) .plate { background-color: rgba(26, 133, 179, 0.95);
}
@keyframes height { 50% { width: 45vw; }
}
li:nth-child(179) { -webkit-transform: rotateZ(261deg) rotateX(263deg) rotateY(125deg); transform: rotateZ(261deg) rotateX(263deg) rotateY(125deg); -webkit-animation: height 25000ms -63968ms ease-in-out infinite; animation: height 25000ms -63968ms ease-in-out infinite;
}
li:nth-child(179) .plate { background-color: rgba(26, 82, 179, 0.95);
}
@keyframes height { 50% { width: 33vw; }
}
li:nth-child(180) { -webkit-transform: rotateZ(66deg) rotateX(2deg) rotateY(327deg); transform: rotateZ(66deg) rotateX(2deg) rotateY(327deg); -webkit-animation: height 25000ms -20750ms ease-in-out infinite; animation: height 25000ms -20750ms ease-in-out infinite;
}
li:nth-child(180) .plate { background-color: rgba(26, 92, 179, 0.95);
}
@keyframes height { 50% { width: 32vw; }
}
CSS Breathing Particle Orb - Script Codes
CSS Breathing Particle Orb - Script Codes
Home Page Home
Developer Paul Sullivan
Username pwsm50
Uploaded January 26, 2023
Rating 4
Size 8,158 Kb
Views 4,048
Do you need developer help for CSS Breathing Particle Orb?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paul Sullivan (pwsm50) Script Codes
Name
Get out and vote - Nov. 8th
CSS Star Wars
Circular Audio Bars
Water ripples
Crazed Bacteria
Thumbs up toggle
Facebook-like Click-to-grow Like Button
Asana Style Buttons
Another Simple CSS load animation
CSS speaker
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!