Particles
Author: @antonreshetov
Result
CSS
xxxxxxxxxx
body {
display: block;
}
@keyframes particle-animation-1 {
100% {
transform: translate3d(31vw, 45vh, 36px);
}
}
.particle:nth-child(1) {
animation: particle-animation-1 60s infinite;
height: 7px;
width: 7px;
opacity: 0.14;
animation-delay: -0.4s;
background-color: #50d926;
transform: translate3d(38vw, 89vh, 93px);
}
@keyframes particle-animation-2 {
100% {
transform: translate3d(74vw, 48vh, 78px);
}
}
.particle:nth-child(2) {
animation: particle-animation-2 60s infinite;
height: 6px;
width: 6px;
opacity: 1;
animation-delay: -0.8s;
background-color: #a326d9;
transform: translate3d(89vw, 78vh, 46px);
}
@keyframes particle-animation-3 {
100% {
transform: translate3d(63vw, 35vh, 50px);
}
}
.particle:nth-child(3) {
animation: particle-animation-3 60s infinite;
height: 6px;
width: 6px;
opacity: 0.14;
animation-delay: -1.2s;
background-color: #267ad9;
transform: translate3d(4vw, 2vh, 91px);
}
@keyframes particle-animation-4 {
100% {
transform: translate3d(84vw, 87vh, 99px);
}
}
.particle:nth-child(4) {
animation: particle-animation-4 60s infinite;
height: 10px;
width: 10px;
opacity: 0.86;
animation-delay: -1.6s;
background-color: #26d982;
transform: translate3d(78vw, 15vh, 61px);
}
@keyframes particle-animation-5 {
100% {
transform: translate3d(24vw, 75vh, 53px);
}
}
.particle:nth-child(5) {
animation: particle-animation-5 60s infinite;
height: 7px;
width: 7px;
opacity: 0.76;
animation-delay: -2s;
background-color: #d96226;
transform: translate3d(39vw, 70vh, 73px);
}
@keyframes particle-animation-6 {
100% {
transform: translate3d(80vw, 67vh, 89px);
}
}
.particle:nth-child(6) {
animation: particle-animation-6 60s infinite;
height: 6px;
width: 6px;
opacity: 0.46;
animation-delay: -2.4s;
background-color: #d9a326;
transform: translate3d(15vw, 40vh, 77px);
}
@keyframes particle-animation-7 {
100% {
transform: translate3d(79vw, 90vh, 10px);
}
}
.particle:nth-child(7) {
animation: particle-animation-7 60s infinite;
height: 7px;
width: 7px;
opacity: 0.74;
animation-delay: -2.8s;
background-color: #267dd9;
transform: translate3d(38vw, 32vh, 91px);
}
@keyframes particle-animation-8 {
100% {
transform: translate3d(30vw, 60vh, 71px);
}
}
.particle:nth-child(8) {
animation: particle-animation-8 60s infinite;
height: 8px;
width: 8px;
opacity: 0.96;
animation-delay: -3.2s;
background-color: #d9d026;
transform: translate3d(82vw, 50vh, 36px);
}
@keyframes particle-animation-9 {
100% {
transform: translate3d(47vw, 19vh, 27px);
}
}
.particle:nth-child(9) {
animation: particle-animation-9 60s infinite;
height: 8px;
width: 8px;
opacity: 0.28;
animation-delay: -3.6s;
background-color: #26d9a0;
transform: translate3d(45vw, 40vh, 100px);
}
@keyframes particle-animation-10 {
100% {
transform: translate3d(10vw, 48vh, 71px);
}
}
.particle:nth-child(10) {
animation: particle-animation-10 60s infinite;
height: 9px;
width: 9px;
opacity: 0.75;
animation-delay: -4s;
background-color: #62d926;
transform: translate3d(79vw, 24vh, 55px);
}
@keyframes particle-animation-11 {
100% {
transform: translate3d(63vw, 68vh, 12px);
}
}
.particle:nth-child(11) {
animation: particle-animation-11 60s infinite;
height: 7px;
width: 7px;
opacity: 0.19;
animation-delay: -4.4s;
background-color: #d926b5;
transform: translate3d(28vw, 59vh, 80px);
}
@keyframes particle-animation-12 {
100% {
transform: translate3d(61vw, 89vh, 76px);
}
}
.particle:nth-child(12) {
animation: particle-animation-12 60s infinite;
height: 6px;
width: 6px;
opacity: 0.86;
animation-delay: -4.8s;
background-color: #59d926;
transform: translate3d(80vw, 12vh, 26px);
}
@keyframes particle-animation-13 {
100% {
transform: translate3d(43vw, 6vh, 40px);
}
}
.particle:nth-child(13) {
animation: particle-animation-13 60s infinite;
height: 7px;
width: 7px;
opacity: 0.4;
animation-delay: -5.2s;
background-color: #80d926;
transform: translate3d(45vw, 3vh, 4px);
}
@keyframes particle-animation-14 {
100% {
transform: translate3d(4vw, 15vh, 53px);
}
}
.particle:nth-child(14) {
animation: particle-animation-14 60s infinite;
height: 7px;
width: 7px;
opacity: 0.71;
animation-delay: -5.6s;
background-color: #d9ac26;
transform: translate3d(78vw, 75vh, 31px);
}
@keyframes particle-animation-15 {
100% {
transform: translate3d(10vw, 16vh, 11px);
}
}
.particle:nth-child(15) {
animation: particle-animation-15 60s infinite;
height: 7px;
width: 7px;
opacity: 0.21;
animation-delay: -6s;
background-color: #2635d9;
transform: translate3d(41vw, 25vh, 3px);
}
@keyframes particle-animation-16 {
100% {
transform: translate3d(29vw, 15vh, 15px);
}
}
.particle:nth-child(16) {
animation: particle-animation-16 60s infinite;
height: 7px;
width: 7px;
opacity: 0.75;
animation-delay: -6.4s;
background-color: #26d965;
transform: translate3d(28vw, 72vh, 80px);
}
@keyframes particle-animation-17 {
100% {
transform: translate3d(8vw, 80vh, 66px);
}
}
.particle:nth-child(17) {
animation: particle-animation-17 60s infinite;
height: 7px;
width: 7px;
opacity: 0.4;
animation-delay: -6.8s;
background-color: #d9263b;
transform: translate3d(17vw, 85vh, 91px);
}
@keyframes particle-animation-18 {
100% {
transform: translate3d(66vw, 6vh, 74px);
}
}
.particle:nth-child(18) {
animation: particle-animation-18 60s infinite;
height: 6px;
width: 6px;
opacity: 0.22;
animation-delay: -7.2s;
background-color: #b8d926;
transform: translate3d(38vw, 89vh, 42px);
}
@keyframes particle-animation-19 {
100% {
transform: translate3d(33vw, 57vh, 48px);
}
}
.particle:nth-child(19) {
animation: particle-animation-19 60s infinite;
height: 7px;
width: 7px;
opacity: 0.04;
animation-delay: -7.6s;
background-color: #d9268b;
transform: translate3d(72vw, 54vh, 46px);
}
@keyframes particle-animation-20 {
100% {
transform: translate3d(48vw, 27vh, 32px);
}
}
.particle:nth-child(20) {
animation: particle-animation-20 60s infinite;
height: 8px;
width: 8px;
opacity: 0.76;
animation-delay: -8s;
background-color: #26d9d9;
transform: translate3d(79vw, 18vh, 94px);
}
@keyframes particle-animation-21 {
100% {
transform: translate3d(70vw, 9vh, 42px);
}
}
.particle:nth-child(21) {
animation: particle-animation-21 60s infinite;
height: 10px;
width: 10px;
opacity: 0.83;
animation-delay: -8.4s;
background-color: #d92638;
transform: translate3d(44vw, 2vh, 63px);
}
@keyframes particle-animation-22 {
100% {
transform: translate3d(84vw, 22vh, 80px);
}
}
.particle:nth-child(22) {
animation: particle-animation-22 60s infinite;
height: 10px;
width: 10px;
opacity: 0.89;
animation-delay: -8.8s;
background-color: #d92662;
transform: translate3d(77vw, 61vh, 5px);
}
@keyframes particle-animation-23 {
100% {
transform: translate3d(35vw, 22vh, 14px);
}
}
.particle:nth-child(23) {
animation: particle-animation-23 60s infinite;
height: 10px;
width: 10px;
opacity: 0.82;
animation-delay: -9.2s;
background-color: #d93e26;
transform: translate3d(7vw, 82vh, 23px);
}
@keyframes particle-animation-24 {
100% {
transform: translate3d(43vw, 90vh, 100px);
}
}
.particle:nth-child(24) {
animation: particle-animation-24 60s infinite;
height: 10px;
width: 10px;
opacity: 0.45;
animation-delay: -9.6s;
background-color: #d92653;
transform: translate3d(86vw, 75vh, 99px);
}
@keyframes particle-animation-25 {
100% {
transform: translate3d(6vw, 85vh, 54px);
}
}
.particle:nth-child(25) {
animation: particle-animation-25 60s infinite;
height: 10px;
width: 10px;
opacity: 0.63;
animation-delay: -10s;
background-color: #26b8d9;
transform: translate3d(3vw, 73vh, 46px);
}
@keyframes particle-animation-26 {
100% {
transform: translate3d(31vw, 88vh, 99px);
}
}
.particle:nth-child(26) {
animation: particle-animation-26 60s infinite;
height: 6px;
width: 6px;
opacity: 0.76;
animation-delay: -10.4s;
background-color: #265fd9;
transform: translate3d(78vw, 32vh, 86px);
}
@keyframes particle-animation-27 {
100% {
transform: translate3d(11vw, 5vh, 62px);
}
}
.particle:nth-child(27) {
animation: particle-animation-27 60s infinite;
height: 6px;
width: 6px;
opacity: 0.85;
animation-delay: -10.8s;
background-color: #262fd9;
transform: translate3d(58vw, 52vh, 26px);
}
@keyframes particle-animation-28 {
100% {
transform: translate3d(65vw, 83vh, 77px);
}
}
.particle:nth-child(28) {
animation: particle-animation-28 60s infinite;
height: 9px;
width: 9px;
opacity: 0.87;
animation-delay: -11.2s;
background-color: #d926d9;
transform: translate3d(26vw, 73vh, 93px);
}
@keyframes particle-animation-29 {
100% {
transform: translate3d(65vw, 12vh, 5px);
}
}
.particle:nth-child(29) {
animation: particle-animation-29 60s infinite;
height: 7px;
width: 7px;
opacity: 0.11;
animation-delay: -11.6s;
background-color: #afd926;
transform: translate3d(88vw, 80vh, 65px);
}
@keyframes particle-animation-30 {
100% {
transform: translate3d(78vw, 24vh, 100px);
}
}
.particle:nth-child(30) {
animation: particle-animation-30 60s infinite;
height: 6px;
width: 6px;
opacity: 0.18;
animation-delay: -12s;
background-color: #d6d926;
transform: translate3d(74vw, 66vh, 67px);
}
@keyframes particle-animation-31 {
100% {
transform: translate3d(85vw, 45vh, 1px);
}
}
.particle:nth-child(31) {
animation: particle-animation-31 60s infinite;
height: 10px;
width: 10px;
opacity: 0.83;
animation-delay: -12.4s;
background-color: #d926d3;
transform: translate3d(2vw, 9vh, 84px);
}
@keyframes particle-animation-32 {
100% {
transform: translate3d(23vw, 10vh, 22px);
}
}
.particle:nth-child(32) {
animation: particle-animation-32 60s infinite;
height: 6px;
width: 6px;
opacity: 0.57;
animation-delay: -12.8s;
background-color: #cd26d9;
transform: translate3d(28vw, 4vh, 67px);
}
@keyframes particle-animation-33 {
100% {
transform: translate3d(87vw, 65vh, 61px);
}
}
.particle:nth-child(33) {
animation: particle-animation-33 60s infinite;
height: 7px;
width: 7px;
opacity: 0.73;
animation-delay: -13.2s;
background-color: #2926d9;
transform: translate3d(13vw, 32vh, 3px);
}
@keyframes particle-animation-34 {
100% {
transform: translate3d(35vw, 76vh, 85px);
}
}
.particle:nth-child(34) {
animation: particle-animation-34 60s infinite;
height: 10px;
width: 10px;
opacity: 0.13;
animation-delay: -13.6s;
background-color: #d92697;
transform: translate3d(11vw, 46vh, 36px);
}
@keyframes particle-animation-35 {
100% {
transform: translate3d(32vw, 42vh, 89px);
}
}
.particle:nth-child(35) {
animation: particle-animation-35 60s infinite;
height: 7px;
width: 7px;
opacity: 0.67;
animation-delay: -14s;
background-color: #2674d9;
transform: translate3d(22vw, 89vh, 38px);
}
@keyframes particle-animation-36 {
100% {
transform: translate3d(6vw, 7vh, 24px);
}
}
.particle:nth-child(36) {
animation: particle-animation-36 60s infinite;
height: 10px;
width: 10px;
opacity: 0.72;
animation-delay: -14.4s;
background-color: #5626d9;
transform: translate3d(72vw, 37vh, 44px);
}
@keyframes particle-animation-37 {
100% {
transform: translate3d(4vw, 38vh, 35px);
}
}
.particle:nth-child(37) {
animation: particle-animation-37 60s infinite;
height: 10px;
width: 10px;
opacity: 0.83;
animation-delay: -14.8s;
background-color: #d9ac26;
transform: translate3d(46vw, 82vh, 25px);
}
@keyframes particle-animation-38 {
100% {
transform: translate3d(61vw, 21vh, 70px);
}
}
.particle:nth-child(38) {
animation: particle-animation-38 60s infinite;
height: 7px;
width: 7px;
opacity: 0.43;
animation-delay: -15.2s;
background-color: #26d965;
transform: translate3d(1vw, 41vh, 26px);
}
@keyframes particle-animation-39 {
100% {
transform: translate3d(41vw, 55vh, 78px);
}
}
.particle:nth-child(39) {
animation: particle-animation-39 60s infinite;
height: 10px;
width: 10px;
opacity: 0.5;
animation-delay: -15.6s;
background-color: #2cd926;
transform: translate3d(30vw, 24vh, 86px);
}
@keyframes particle-animation-40 {
100% {
transform: translate3d(78vw, 80vh, 85px);
}
}
.particle:nth-child(40) {
animation: particle-animation-40 60s infinite;
height: 9px;
width: 9px;
opacity: 0.64;
animation-delay: -16s;
background-color: #26d9af;
transform: translate3d(79vw, 10vh, 60px);
}
@keyframes particle-animation-41 {
100% {
transform: translate3d(6vw, 6vh, 28px);
}
}
.particle:nth-child(41) {
animation: particle-animation-41 60s infinite;
height: 8px;
width: 8px;
opacity: 0.92;
animation-delay: -16.4s;
background-color: #d94426;
transform: translate3d(55vw, 68vh, 78px);
}
@keyframes particle-animation-42 {
100% {
transform: translate3d(33vw, 1vh, 74px);
}
}
.particle:nth-child(42) {
animation: particle-animation-42 60s infinite;
height: 7px;
width: 7px;
opacity: 0.85;
animation-delay: -16.8s;
background-color: #265cd9;
transform: translate3d(24vw, 12vh, 7px);
}
@keyframes particle-animation-43 {
100% {
transform: translate3d(63vw, 37vh, 16px);
}
}
.particle:nth-child(43) {
animation: particle-animation-43 60s infinite;
height: 6px;
width: 6px;
opacity: 0.32;
animation-delay: -17.2s;
background-color: #d92635;
transform: translate3d(50vw, 48vh, 27px);
}
@keyframes particle-animation-44 {
100% {
transform: translate3d(57vw, 18vh, 9px);
}
}
.particle:nth-child(44) {
animation: particle-animation-44 60s infinite;
height: 10px;
width: 10px;
opacity: 0.96;
animation-delay: -17.6s;
background-color: #26cdd9;
transform: translate3d(69vw, 16vh, 81px);
}
@keyframes particle-animation-45 {
100% {
transform: translate3d(65vw, 78vh, 53px);
}
}
.particle:nth-child(45) {
animation: particle-animation-45 60s infinite;
height: 10px;
width: 10px;
opacity: 0.98;
animation-delay: -18s;
background-color: #264ad9;
transform: translate3d(18vw, 19vh, 8px);
}
@keyframes particle-animation-46 {
100% {
transform: translate3d(37vw, 12vh, 64px);
}
}
.particle:nth-child(46) {
animation: particle-animation-46 60s infinite;
height: 8px;
width: 8px;
opacity: 0.39;
animation-delay: -18.4s;
background-color: #d92638;
transform: translate3d(61vw, 83vh, 75px);
}
@keyframes particle-animation-47 {
100% {
transform: translate3d(33vw, 42vh, 86px);
}
}
.particle:nth-child(47) {
animation: particle-animation-47 60s infinite;
height: 10px;
width: 10px;
opacity: 0.04;
animation-delay: -18.8s;
background-color: #9d26d9;
transform: translate3d(36vw, 25vh, 79px);
}
@keyframes particle-animation-48 {
100% {
transform: translate3d(8vw, 31vh, 35px);
}
}
.particle:nth-child(48) {
animation: particle-animation-48 60s infinite;
height: 10px;
width: 10px;
opacity: 0.1;
animation-delay: -19.2s;
background-color: #268ed9;
transform: translate3d(8vw, 46vh, 35px);
}
@keyframes particle-animation-49 {
100% {
transform: translate3d(19vw, 52vh, 76px);
}
}
.particle:nth-child(49) {
animation: particle-animation-49 60s infinite;
height: 9px;
width: 9px;
opacity: 0.68;
animation-delay: -19.6s;
background-color: #2697d9;
transform: translate3d(19vw, 35vh, 84px);
}
@keyframes particle-animation-50 {
100% {
transform: translate3d(56vw, 10vh, 8px);
}
}
.particle:nth-child(50) {
animation: particle-animation-50 60s infinite;
height: 10px;
width: 10px;
opacity: 0.87;
animation-delay: -20s;
background-color: #4126d9;
transform: translate3d(73vw, 24vh, 23px);
}
.particle {
position: absolute;
border-radius: 50%;
}
CSS
HTML
HTML
xxxxxxxxxx
<div id="container">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>