CSS Particles
How do I make an css particles?
Inspired by Bits. Be warned: terrible performance.Click and hold for even worse performance.. What is a css particles? How do you make a css particles? This script and codes were developed by Giana on 12 June 2022, Sunday.
CSS Particles Previews
CSS Particles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Particles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="purple"></div>
<div class="medium-blue"></div>
<div class="light-blue"></div>
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="cyan"></div>
<div class="light-green"></div>
<div class="lime"></div>
<div class="magenta"></div>
<div class="lightish-red"></div>
<div class="pink"></div>
</body>
</html>
CSS Particles - Script Codes CSS Codes
body { background: -webkit-radial-gradient(circle, #24246e, #06051f); background: radial-gradient(circle, #24246e, #06051f); overflow: hidden; position: relative; width: 100vw; height: 100vh;
}
body:active div,
body:active div::before,
body:active div::after { padding: 40px;
}
div,
div::before,
div::after { content: ''; position: fixed; top: 0; left: 0; opacity: 0.9; -webkit-transform-origin: top; transform-origin: top; -webkit-transition: all 5s linear 0s; transition: all 5s linear 0s;
}
.purple { -webkit-animation: purple linear 30s alternate infinite; animation: purple linear 30s alternate infinite; border: 2px solid #241379; border-radius: 100%; width: 11px; height: 11px; -webkit-transform: translate3d(93vw, 37vh, 0); transform: translate3d(93vw, 37vh, 0); z-index: 7;
}
.purple::before { -webkit-animation: purple-pseudo linear 15s alternate infinite; animation: purple-pseudo linear 15s alternate infinite; background: #241379; border: 2px solid #241379; width: 24px; height: 43px; -webkit-transform: translate3d(-40vw, -6vh, 0) rotate(21deg); transform: translate3d(-40vw, -6vh, 0) rotate(21deg);
}
.purple::after { -webkit-animation: purple-pseudo linear 20s alternate infinite; animation: purple-pseudo linear 20s alternate infinite; border: 2px solid #241379; width: 37px; height: 42px; -webkit-transform: translate3d(-82vw, 27vh, 0) rotate(300deg); transform: translate3d(-82vw, 27vh, 0) rotate(300deg);
}
@-webkit-keyframes purple { 50% { -webkit-transform: translate3d(10vw, 77vh, 0); transform: translate3d(10vw, 77vh, 0); } 100% { -webkit-transform: translate3d(50vw, 71vh, 0); transform: translate3d(50vw, 71vh, 0); }
}
@keyframes purple { 50% { -webkit-transform: translate3d(10vw, 77vh, 0); transform: translate3d(10vw, 77vh, 0); } 100% { -webkit-transform: translate3d(50vw, 71vh, 0); transform: translate3d(50vw, 71vh, 0); }
}
@-webkit-keyframes purple-pseudo { 33% { -webkit-transform: translate3d(37vw, -51vh, 0) rotate(93deg); transform: translate3d(37vw, -51vh, 0) rotate(93deg); } 100% { -webkit-transform: translate3d(46vw, -9vh, 0) rotate(154deg); transform: translate3d(46vw, -9vh, 0) rotate(154deg); }
}
@keyframes purple-pseudo { 33% { -webkit-transform: translate3d(37vw, -51vh, 0) rotate(93deg); transform: translate3d(37vw, -51vh, 0) rotate(93deg); } 100% { -webkit-transform: translate3d(46vw, -9vh, 0) rotate(154deg); transform: translate3d(46vw, -9vh, 0) rotate(154deg); }
}
.medium-blue { -webkit-animation: medium-blue linear 30s alternate infinite; animation: medium-blue linear 30s alternate infinite; border: 2px solid #2185bf; border-radius: 100%; width: 42px; height: 42px; -webkit-transform: translate3d(38vw, 32vh, 0); transform: translate3d(38vw, 32vh, 0); z-index: 2;
}
.medium-blue::before { -webkit-animation: medium-blue-pseudo linear 15s alternate infinite; animation: medium-blue-pseudo linear 15s alternate infinite; background: #2185bf; border: 2px solid #2185bf; width: 47px; height: 15px; -webkit-transform: translate3d(5vw, 12vh, 0) rotate(303deg); transform: translate3d(5vw, 12vh, 0) rotate(303deg);
}
.medium-blue::after { -webkit-animation: medium-blue-pseudo linear 20s alternate infinite; animation: medium-blue-pseudo linear 20s alternate infinite; border: 2px solid #2185bf; width: 34px; height: 41px; -webkit-transform: translate3d(58vw, 31vh, 0) rotate(98deg); transform: translate3d(58vw, 31vh, 0) rotate(98deg);
}
@-webkit-keyframes medium-blue { 50% { -webkit-transform: translate3d(39vw, 10vh, 0); transform: translate3d(39vw, 10vh, 0); } 100% { -webkit-transform: translate3d(82vw, 60vh, 0); transform: translate3d(82vw, 60vh, 0); }
}
@keyframes medium-blue { 50% { -webkit-transform: translate3d(39vw, 10vh, 0); transform: translate3d(39vw, 10vh, 0); } 100% { -webkit-transform: translate3d(82vw, 60vh, 0); transform: translate3d(82vw, 60vh, 0); }
}
@-webkit-keyframes medium-blue-pseudo { 33% { -webkit-transform: translate3d(-28vw, 51vh, 0) rotate(334deg); transform: translate3d(-28vw, 51vh, 0) rotate(334deg); } 100% { -webkit-transform: translate3d(-32vw, 11vh, 0) rotate(307deg); transform: translate3d(-32vw, 11vh, 0) rotate(307deg); }
}
@keyframes medium-blue-pseudo { 33% { -webkit-transform: translate3d(-28vw, 51vh, 0) rotate(334deg); transform: translate3d(-28vw, 51vh, 0) rotate(334deg); } 100% { -webkit-transform: translate3d(-32vw, 11vh, 0) rotate(307deg); transform: translate3d(-32vw, 11vh, 0) rotate(307deg); }
}
.light-blue { -webkit-animation: light-blue linear 30s alternate infinite; animation: light-blue linear 30s alternate infinite; border: 2px solid #1fbce1; border-radius: 100%; width: 42px; height: 42px; -webkit-transform: translate3d(64vw, 97vh, 0); transform: translate3d(64vw, 97vh, 0); z-index: 2;
}
.light-blue::before { -webkit-animation: light-blue-pseudo linear 15s alternate infinite; animation: light-blue-pseudo linear 15s alternate infinite; background: #1fbce1; border: 2px solid #1fbce1; width: 17px; height: 33px; -webkit-transform: translate3d(-17vw, -88vh, 0) rotate(164deg); transform: translate3d(-17vw, -88vh, 0) rotate(164deg);
}
.light-blue::after { -webkit-animation: light-blue-pseudo linear 20s alternate infinite; animation: light-blue-pseudo linear 20s alternate infinite; border: 2px solid #1fbce1; width: 27px; height: 29px; -webkit-transform: translate3d(-1vw, -28vh, 0) rotate(47deg); transform: translate3d(-1vw, -28vh, 0) rotate(47deg);
}
@-webkit-keyframes light-blue { 50% { -webkit-transform: translate3d(22vw, 33vh, 0); transform: translate3d(22vw, 33vh, 0); } 100% { -webkit-transform: translate3d(55vw, 23vh, 0); transform: translate3d(55vw, 23vh, 0); }
}
@keyframes light-blue { 50% { -webkit-transform: translate3d(22vw, 33vh, 0); transform: translate3d(22vw, 33vh, 0); } 100% { -webkit-transform: translate3d(55vw, 23vh, 0); transform: translate3d(55vw, 23vh, 0); }
}
@-webkit-keyframes light-blue-pseudo { 33% { -webkit-transform: translate3d(-7vw, 44vh, 0) rotate(80deg); transform: translate3d(-7vw, 44vh, 0) rotate(80deg); } 100% { -webkit-transform: translate3d(34vw, -7vh, 0) rotate(5deg); transform: translate3d(34vw, -7vh, 0) rotate(5deg); }
}
@keyframes light-blue-pseudo { 33% { -webkit-transform: translate3d(-7vw, 44vh, 0) rotate(80deg); transform: translate3d(-7vw, 44vh, 0) rotate(80deg); } 100% { -webkit-transform: translate3d(34vw, -7vh, 0) rotate(5deg); transform: translate3d(34vw, -7vh, 0) rotate(5deg); }
}
.red { -webkit-animation: red linear 30s alternate infinite; animation: red linear 30s alternate infinite; border: 2px solid #b62f56; border-radius: 100%; width: 39px; height: 39px; -webkit-transform: translate3d(36vw, 18vh, 0); transform: translate3d(36vw, 18vh, 0); z-index: 3;
}
.red::before { -webkit-animation: red-pseudo linear 15s alternate infinite; animation: red-pseudo linear 15s alternate infinite; background: #b62f56; border: 2px solid #b62f56; width: 46px; height: 13px; -webkit-transform: translate3d(-26vw, 65vh, 0) rotate(77deg); transform: translate3d(-26vw, 65vh, 0) rotate(77deg);
}
.red::after { -webkit-animation: red-pseudo linear 20s alternate infinite; animation: red-pseudo linear 20s alternate infinite; border: 2px solid #b62f56; width: 40px; height: 46px; -webkit-transform: translate3d(19vw, 12vh, 0) rotate(117deg); transform: translate3d(19vw, 12vh, 0) rotate(117deg);
}
@-webkit-keyframes red { 50% { -webkit-transform: translate3d(32vw, 75vh, 0); transform: translate3d(32vw, 75vh, 0); } 100% { -webkit-transform: translate3d(41vw, 30vh, 0); transform: translate3d(41vw, 30vh, 0); }
}
@keyframes red { 50% { -webkit-transform: translate3d(32vw, 75vh, 0); transform: translate3d(32vw, 75vh, 0); } 100% { -webkit-transform: translate3d(41vw, 30vh, 0); transform: translate3d(41vw, 30vh, 0); }
}
@-webkit-keyframes red-pseudo { 33% { -webkit-transform: translate3d(48vw, 17vh, 0) rotate(168deg); transform: translate3d(48vw, 17vh, 0) rotate(168deg); } 100% { -webkit-transform: translate3d(14vw, 35vh, 0) rotate(288deg); transform: translate3d(14vw, 35vh, 0) rotate(288deg); }
}
@keyframes red-pseudo { 33% { -webkit-transform: translate3d(48vw, 17vh, 0) rotate(168deg); transform: translate3d(48vw, 17vh, 0) rotate(168deg); } 100% { -webkit-transform: translate3d(14vw, 35vh, 0) rotate(288deg); transform: translate3d(14vw, 35vh, 0) rotate(288deg); }
}
.orange { -webkit-animation: orange linear 30s alternate infinite; animation: orange linear 30s alternate infinite; border: 2px solid #d5764c; border-radius: 100%; width: 24px; height: 24px; -webkit-transform: translate3d(65vw, 77vh, 0); transform: translate3d(65vw, 77vh, 0); z-index: 1;
}
.orange::before { -webkit-animation: orange-pseudo linear 15s alternate infinite; animation: orange-pseudo linear 15s alternate infinite; background: #d5764c; border: 2px solid #d5764c; width: 30px; height: 27px; -webkit-transform: translate3d(-7vw, -42vh, 0) rotate(315deg); transform: translate3d(-7vw, -42vh, 0) rotate(315deg);
}
.orange::after { -webkit-animation: orange-pseudo linear 20s alternate infinite; animation: orange-pseudo linear 20s alternate infinite; border: 2px solid #d5764c; width: 41px; height: 27px; -webkit-transform: translate3d(-31vw, -76vh, 0) rotate(291deg); transform: translate3d(-31vw, -76vh, 0) rotate(291deg);
}
@-webkit-keyframes orange { 50% { -webkit-transform: translate3d(2vw, 84vh, 0); transform: translate3d(2vw, 84vh, 0); } 100% { -webkit-transform: translate3d(31vw, 96vh, 0); transform: translate3d(31vw, 96vh, 0); }
}
@keyframes orange { 50% { -webkit-transform: translate3d(2vw, 84vh, 0); transform: translate3d(2vw, 84vh, 0); } 100% { -webkit-transform: translate3d(31vw, 96vh, 0); transform: translate3d(31vw, 96vh, 0); }
}
@-webkit-keyframes orange-pseudo { 33% { -webkit-transform: translate3d(75vw, -78vh, 0) rotate(193deg); transform: translate3d(75vw, -78vh, 0) rotate(193deg); } 100% { -webkit-transform: translate3d(16vw, -47vh, 0) rotate(305deg); transform: translate3d(16vw, -47vh, 0) rotate(305deg); }
}
@keyframes orange-pseudo { 33% { -webkit-transform: translate3d(75vw, -78vh, 0) rotate(193deg); transform: translate3d(75vw, -78vh, 0) rotate(193deg); } 100% { -webkit-transform: translate3d(16vw, -47vh, 0) rotate(305deg); transform: translate3d(16vw, -47vh, 0) rotate(305deg); }
}
.yellow { -webkit-animation: yellow linear 30s alternate infinite; animation: yellow linear 30s alternate infinite; border: 2px solid #ffd53e; border-radius: 100%; width: 41px; height: 41px; -webkit-transform: translate3d(72vw, 74vh, 0); transform: translate3d(72vw, 74vh, 0); z-index: 6;
}
.yellow::before { -webkit-animation: yellow-pseudo linear 15s alternate infinite; animation: yellow-pseudo linear 15s alternate infinite; background: #ffd53e; border: 2px solid #ffd53e; width: 9px; height: 15px; -webkit-transform: translate3d(6vw, -45vh, 0) rotate(275deg); transform: translate3d(6vw, -45vh, 0) rotate(275deg);
}
.yellow::after { -webkit-animation: yellow-pseudo linear 20s alternate infinite; animation: yellow-pseudo linear 20s alternate infinite; border: 2px solid #ffd53e; width: 19px; height: 25px; -webkit-transform: translate3d(0vw, -20vh, 0) rotate(245deg); transform: translate3d(0vw, -20vh, 0) rotate(245deg);
}
@-webkit-keyframes yellow { 50% { -webkit-transform: translate3d(2vw, 44vh, 0); transform: translate3d(2vw, 44vh, 0); } 100% { -webkit-transform: translate3d(49vw, 50vh, 0); transform: translate3d(49vw, 50vh, 0); }
}
@keyframes yellow { 50% { -webkit-transform: translate3d(2vw, 44vh, 0); transform: translate3d(2vw, 44vh, 0); } 100% { -webkit-transform: translate3d(49vw, 50vh, 0); transform: translate3d(49vw, 50vh, 0); }
}
@-webkit-keyframes yellow-pseudo { 33% { -webkit-transform: translate3d(76vw, 7vh, 0) rotate(220deg); transform: translate3d(76vw, 7vh, 0) rotate(220deg); } 100% { -webkit-transform: translate3d(7vw, -39vh, 0) rotate(262deg); transform: translate3d(7vw, -39vh, 0) rotate(262deg); }
}
@keyframes yellow-pseudo { 33% { -webkit-transform: translate3d(76vw, 7vh, 0) rotate(220deg); transform: translate3d(76vw, 7vh, 0) rotate(220deg); } 100% { -webkit-transform: translate3d(7vw, -39vh, 0) rotate(262deg); transform: translate3d(7vw, -39vh, 0) rotate(262deg); }
}
.cyan { -webkit-animation: cyan linear 30s alternate infinite; animation: cyan linear 30s alternate infinite; border: 2px solid #78ffba; border-radius: 100%; width: 47px; height: 47px; -webkit-transform: translate3d(63vw, 99vh, 0); transform: translate3d(63vw, 99vh, 0); z-index: 3;
}
.cyan::before { -webkit-animation: cyan-pseudo linear 15s alternate infinite; animation: cyan-pseudo linear 15s alternate infinite; background: #78ffba; border: 2px solid #78ffba; width: 27px; height: 19px; -webkit-transform: translate3d(-47vw, -21vh, 0) rotate(122deg); transform: translate3d(-47vw, -21vh, 0) rotate(122deg);
}
.cyan::after { -webkit-animation: cyan-pseudo linear 20s alternate infinite; animation: cyan-pseudo linear 20s alternate infinite; border: 2px solid #78ffba; width: 15px; height: 15px; -webkit-transform: translate3d(-8vw, -26vh, 0) rotate(9deg); transform: translate3d(-8vw, -26vh, 0) rotate(9deg);
}
@-webkit-keyframes cyan { 50% { -webkit-transform: translate3d(68vw, 70vh, 0); transform: translate3d(68vw, 70vh, 0); } 100% { -webkit-transform: translate3d(47vw, 51vh, 0); transform: translate3d(47vw, 51vh, 0); }
}
@keyframes cyan { 50% { -webkit-transform: translate3d(68vw, 70vh, 0); transform: translate3d(68vw, 70vh, 0); } 100% { -webkit-transform: translate3d(47vw, 51vh, 0); transform: translate3d(47vw, 51vh, 0); }
}
@-webkit-keyframes cyan-pseudo { 33% { -webkit-transform: translate3d(-31vw, -51vh, 0) rotate(76deg); transform: translate3d(-31vw, -51vh, 0) rotate(76deg); } 100% { -webkit-transform: translate3d(-5vw, 14vh, 0) rotate(320deg); transform: translate3d(-5vw, 14vh, 0) rotate(320deg); }
}
@keyframes cyan-pseudo { 33% { -webkit-transform: translate3d(-31vw, -51vh, 0) rotate(76deg); transform: translate3d(-31vw, -51vh, 0) rotate(76deg); } 100% { -webkit-transform: translate3d(-5vw, 14vh, 0) rotate(320deg); transform: translate3d(-5vw, 14vh, 0) rotate(320deg); }
}
.light-green { -webkit-animation: light-green linear 30s alternate infinite; animation: light-green linear 30s alternate infinite; border: 2px solid #98fd85; border-radius: 100%; width: 5px; height: 5px; -webkit-transform: translate3d(45vw, 23vh, 0); transform: translate3d(45vw, 23vh, 0); z-index: 9;
}
.light-green::before { -webkit-animation: light-green-pseudo linear 15s alternate infinite; animation: light-green-pseudo linear 15s alternate infinite; background: #98fd85; border: 2px solid #98fd85; width: 39px; height: 49px; -webkit-transform: translate3d(-5vw, 27vh, 0) rotate(53deg); transform: translate3d(-5vw, 27vh, 0) rotate(53deg);
}
.light-green::after { -webkit-animation: light-green-pseudo linear 20s alternate infinite; animation: light-green-pseudo linear 20s alternate infinite; border: 2px solid #98fd85; width: 22px; height: 20px; -webkit-transform: translate3d(0vw, 19vh, 0) rotate(360deg); transform: translate3d(0vw, 19vh, 0) rotate(360deg);
}
@-webkit-keyframes light-green { 50% { -webkit-transform: translate3d(26vw, 93vh, 0); transform: translate3d(26vw, 93vh, 0); } 100% { -webkit-transform: translate3d(34vw, 67vh, 0); transform: translate3d(34vw, 67vh, 0); }
}
@keyframes light-green { 50% { -webkit-transform: translate3d(26vw, 93vh, 0); transform: translate3d(26vw, 93vh, 0); } 100% { -webkit-transform: translate3d(34vw, 67vh, 0); transform: translate3d(34vw, 67vh, 0); }
}
@-webkit-keyframes light-green-pseudo { 33% { -webkit-transform: translate3d(-20vw, -32vh, 0) rotate(180deg); transform: translate3d(-20vw, -32vh, 0) rotate(180deg); } 100% { -webkit-transform: translate3d(5vw, 11vh, 0) rotate(2deg); transform: translate3d(5vw, 11vh, 0) rotate(2deg); }
}
@keyframes light-green-pseudo { 33% { -webkit-transform: translate3d(-20vw, -32vh, 0) rotate(180deg); transform: translate3d(-20vw, -32vh, 0) rotate(180deg); } 100% { -webkit-transform: translate3d(5vw, 11vh, 0) rotate(2deg); transform: translate3d(5vw, 11vh, 0) rotate(2deg); }
}
.lime { -webkit-animation: lime linear 30s alternate infinite; animation: lime linear 30s alternate infinite; border: 2px solid #befb46; border-radius: 100%; width: 18px; height: 18px; -webkit-transform: translate3d(53vw, 68vh, 0); transform: translate3d(53vw, 68vh, 0); z-index: 3;
}
.lime::before { -webkit-animation: lime-pseudo linear 15s alternate infinite; animation: lime-pseudo linear 15s alternate infinite; background: #befb46; border: 2px solid #befb46; width: 39px; height: 31px; -webkit-transform: translate3d(26vw, -36vh, 0) rotate(237deg); transform: translate3d(26vw, -36vh, 0) rotate(237deg);
}
.lime::after { -webkit-animation: lime-pseudo linear 20s alternate infinite; animation: lime-pseudo linear 20s alternate infinite; border: 2px solid #befb46; width: 40px; height: 38px; -webkit-transform: translate3d(11vw, -62vh, 0) rotate(72deg); transform: translate3d(11vw, -62vh, 0) rotate(72deg);
}
@-webkit-keyframes lime { 50% { -webkit-transform: translate3d(11vw, 46vh, 0); transform: translate3d(11vw, 46vh, 0); } 100% { -webkit-transform: translate3d(62vw, 65vh, 0); transform: translate3d(62vw, 65vh, 0); }
}
@keyframes lime { 50% { -webkit-transform: translate3d(11vw, 46vh, 0); transform: translate3d(11vw, 46vh, 0); } 100% { -webkit-transform: translate3d(62vw, 65vh, 0); transform: translate3d(62vw, 65vh, 0); }
}
@-webkit-keyframes lime-pseudo { 33% { -webkit-transform: translate3d(-9vw, 20vh, 0) rotate(214deg); transform: translate3d(-9vw, 20vh, 0) rotate(214deg); } 100% { -webkit-transform: translate3d(15vw, -49vh, 0) rotate(322deg); transform: translate3d(15vw, -49vh, 0) rotate(322deg); }
}
@keyframes lime-pseudo { 33% { -webkit-transform: translate3d(-9vw, 20vh, 0) rotate(214deg); transform: translate3d(-9vw, 20vh, 0) rotate(214deg); } 100% { -webkit-transform: translate3d(15vw, -49vh, 0) rotate(322deg); transform: translate3d(15vw, -49vh, 0) rotate(322deg); }
}
.magenta { -webkit-animation: magenta linear 30s alternate infinite; animation: magenta linear 30s alternate infinite; border: 2px solid #6c046c; border-radius: 100%; width: 26px; height: 26px; -webkit-transform: translate3d(55vw, 27vh, 0); transform: translate3d(55vw, 27vh, 0); z-index: 1;
}
.magenta::before { -webkit-animation: magenta-pseudo linear 15s alternate infinite; animation: magenta-pseudo linear 15s alternate infinite; background: #6c046c; border: 2px solid #6c046c; width: 22px; height: 27px; -webkit-transform: translate3d(-36vw, 54vh, 0) rotate(159deg); transform: translate3d(-36vw, 54vh, 0) rotate(159deg);
}
.magenta::after { -webkit-animation: magenta-pseudo linear 20s alternate infinite; animation: magenta-pseudo linear 20s alternate infinite; border: 2px solid #6c046c; width: 24px; height: 21px; -webkit-transform: translate3d(-44vw, 23vh, 0) rotate(99deg); transform: translate3d(-44vw, 23vh, 0) rotate(99deg);
}
@-webkit-keyframes magenta { 50% { -webkit-transform: translate3d(92vw, 76vh, 0); transform: translate3d(92vw, 76vh, 0); } 100% { -webkit-transform: translate3d(85vw, 21vh, 0); transform: translate3d(85vw, 21vh, 0); }
}
@keyframes magenta { 50% { -webkit-transform: translate3d(92vw, 76vh, 0); transform: translate3d(92vw, 76vh, 0); } 100% { -webkit-transform: translate3d(85vw, 21vh, 0); transform: translate3d(85vw, 21vh, 0); }
}
@-webkit-keyframes magenta-pseudo { 33% { -webkit-transform: translate3d(1vw, -28vh, 0) rotate(333deg); transform: translate3d(1vw, -28vh, 0) rotate(333deg); } 100% { -webkit-transform: translate3d(-67vw, -4vh, 0) rotate(3deg); transform: translate3d(-67vw, -4vh, 0) rotate(3deg); }
}
@keyframes magenta-pseudo { 33% { -webkit-transform: translate3d(1vw, -28vh, 0) rotate(333deg); transform: translate3d(1vw, -28vh, 0) rotate(333deg); } 100% { -webkit-transform: translate3d(-67vw, -4vh, 0) rotate(3deg); transform: translate3d(-67vw, -4vh, 0) rotate(3deg); }
}
.lightish-red { -webkit-animation: lightish-red linear 30s alternate infinite; animation: lightish-red linear 30s alternate infinite; border: 2px solid #f04c81; border-radius: 100%; width: 22px; height: 22px; -webkit-transform: translate3d(12vw, 28vh, 0); transform: translate3d(12vw, 28vh, 0); z-index: 12;
}
.lightish-red::before { -webkit-animation: lightish-red-pseudo linear 15s alternate infinite; animation: lightish-red-pseudo linear 15s alternate infinite; background: #f04c81; border: 2px solid #f04c81; width: 14px; height: 11px; -webkit-transform: translate3d(-1vw, 37vh, 0) rotate(136deg); transform: translate3d(-1vw, 37vh, 0) rotate(136deg);
}
.lightish-red::after { -webkit-animation: lightish-red-pseudo linear 20s alternate infinite; animation: lightish-red-pseudo linear 20s alternate infinite; border: 2px solid #f04c81; width: 47px; height: 32px; -webkit-transform: translate3d(5vw, 69vh, 0) rotate(52deg); transform: translate3d(5vw, 69vh, 0) rotate(52deg);
}
@-webkit-keyframes lightish-red { 50% { -webkit-transform: translate3d(43vw, 100vh, 0); transform: translate3d(43vw, 100vh, 0); } 100% { -webkit-transform: translate3d(32vw, 19vh, 0); transform: translate3d(32vw, 19vh, 0); }
}
@keyframes lightish-red { 50% { -webkit-transform: translate3d(43vw, 100vh, 0); transform: translate3d(43vw, 100vh, 0); } 100% { -webkit-transform: translate3d(32vw, 19vh, 0); transform: translate3d(32vw, 19vh, 0); }
}
@-webkit-keyframes lightish-red-pseudo { 33% { -webkit-transform: translate3d(27vw, -25vh, 0) rotate(123deg); transform: translate3d(27vw, -25vh, 0) rotate(123deg); } 100% { -webkit-transform: translate3d(1vw, 31vh, 0) rotate(267deg); transform: translate3d(1vw, 31vh, 0) rotate(267deg); }
}
@keyframes lightish-red-pseudo { 33% { -webkit-transform: translate3d(27vw, -25vh, 0) rotate(123deg); transform: translate3d(27vw, -25vh, 0) rotate(123deg); } 100% { -webkit-transform: translate3d(1vw, 31vh, 0) rotate(267deg); transform: translate3d(1vw, 31vh, 0) rotate(267deg); }
}
.pink { -webkit-animation: pink linear 30s alternate infinite; animation: pink linear 30s alternate infinite; border: 2px solid #ff4293; border-radius: 100%; width: 21px; height: 21px; -webkit-transform: translate3d(12vw, 50vh, 0); transform: translate3d(12vw, 50vh, 0); z-index: 1;
}
.pink::before { -webkit-animation: pink-pseudo linear 15s alternate infinite; animation: pink-pseudo linear 15s alternate infinite; background: #ff4293; border: 2px solid #ff4293; width: 34px; height: 36px; -webkit-transform: translate3d(29vw, 2vh, 0) rotate(288deg); transform: translate3d(29vw, 2vh, 0) rotate(288deg);
}
.pink::after { -webkit-animation: pink-pseudo linear 20s alternate infinite; animation: pink-pseudo linear 20s alternate infinite; border: 2px solid #ff4293; width: 7px; height: 27px; -webkit-transform: translate3d(-7vw, 23vh, 0) rotate(326deg); transform: translate3d(-7vw, 23vh, 0) rotate(326deg);
}
@-webkit-keyframes pink { 50% { -webkit-transform: translate3d(1vw, 53vh, 0); transform: translate3d(1vw, 53vh, 0); } 100% { -webkit-transform: translate3d(97vw, 33vh, 0); transform: translate3d(97vw, 33vh, 0); }
}
@keyframes pink { 50% { -webkit-transform: translate3d(1vw, 53vh, 0); transform: translate3d(1vw, 53vh, 0); } 100% { -webkit-transform: translate3d(97vw, 33vh, 0); transform: translate3d(97vw, 33vh, 0); }
}
@-webkit-keyframes pink-pseudo { 33% { -webkit-transform: translate3d(90vw, -14vh, 0) rotate(95deg); transform: translate3d(90vw, -14vh, 0) rotate(95deg); } 100% { -webkit-transform: translate3d(-9vw, 3vh, 0) rotate(206deg); transform: translate3d(-9vw, 3vh, 0) rotate(206deg); }
}
@keyframes pink-pseudo { 33% { -webkit-transform: translate3d(90vw, -14vh, 0) rotate(95deg); transform: translate3d(90vw, -14vh, 0) rotate(95deg); } 100% { -webkit-transform: translate3d(-9vw, 3vh, 0) rotate(206deg); transform: translate3d(-9vw, 3vh, 0) rotate(206deg); }
}
| Developer | Giana |
| Username | giana |
| Uploaded | June 12, 2022 |
| Rating | 4.5 |
| Size | 5,265 Kb |
| Views | 50,600 |
Do you need developer help for CSS Particles?
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!
Giana (giana) Script Codes
| Name | Size |
| CSS background change on scroll | 2,944 Kb |
| Halloween CSS Bleeding Header | 3,721 Kb |
| Buttons with animated background | 3,550 Kb |
| CSS-only shimmering neon text | 3,661 Kb |
| Pure CSS Candy Cane Text | 2,695 Kb |
| CSS Border transitions | 4,499 Kb |
| Fully Functional Sentient CLI | 4,534 Kb |
| Galaxy | 2,744 Kb |
| Sass border drawing mixin | 3,010 Kb |
| Button hover effects with box-shadow | 4,557 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| See Through | Larrygeams | 77,410 Kb |
| CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
| Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
| Buttons with style | Chbymnky | 2,082 Kb |
| A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| Playing with FlexBox | _Billy_Brown | 3,162 Kb |
| DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
| Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
| Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!