Star Thing

Developer

Size

2,982 Kb

Views

40,480

Star Thing Previews
Star Thing HTML Codes
Star Thing CSS Codes

How do I make an star thing?

What is a star thing? How do you make a star thing? This script and codes were developed by Ash on 09 August 2022, Tuesday.

Star Thing Previews

Star Thing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Star Thing</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
<div class='star'></div>
</body>
</html>

Star Thing - Script Codes CSS Codes

html,
body { background: #3b3a36; overflow: hidden; height: 100%;
}
.star { background: #edd9c0; border-radius: 10px; position: absolute;
}
.star:nth-child(1) { left: 47vw; top: 9vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 166s ease 0s alternate none infinite; animation: carousel 166s ease 0s alternate none infinite;
}
.star:nth-child(2) { left: 18vw; top: 7vh; opacity: 0.3; height: 3px; width: 3px; -webkit-animation: carousel -46s ease 0s alternate none infinite; animation: carousel -46s ease 0s alternate none infinite;
}
.star:nth-child(3) { left: 68vw; top: 43vh; opacity: 0.4; height: 4px; width: 4px; -webkit-animation: carousel -93s ease 0s alternate none infinite; animation: carousel -93s ease 0s alternate none infinite;
}
.star:nth-child(4) { left: 47vw; top: 14vh; opacity: 0.9; height: 9px; width: 9px; -webkit-animation: carousel -65s ease 0s alternate none infinite; animation: carousel -65s ease 0s alternate none infinite;
}
.star:nth-child(5) { left: 64vw; top: 53vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel 175s ease 0s alternate none infinite; animation: carousel 175s ease 0s alternate none infinite;
}
.star:nth-child(6) { left: 38vw; top: 30vh; opacity: 0.6; height: 6px; width: 6px; -webkit-animation: carousel 344s ease 0s alternate none infinite; animation: carousel 344s ease 0s alternate none infinite;
}
.star:nth-child(7) { left: 58vw; top: 92vh; opacity: 0.4; height: 4px; width: 4px; -webkit-animation: carousel -14s ease 0s alternate none infinite; animation: carousel -14s ease 0s alternate none infinite;
}
.star:nth-child(8) { left: 63vw; top: 1vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 328s ease 0s alternate none infinite; animation: carousel 328s ease 0s alternate none infinite;
}
.star:nth-child(9) { left: 97vw; top: 14vh; opacity: 0.6; height: 6px; width: 6px; -webkit-animation: carousel 330s ease 0s alternate none infinite; animation: carousel 330s ease 0s alternate none infinite;
}
.star:nth-child(10) { left: 94vw; top: 7vh; opacity: 0.4; height: 4px; width: 4px; -webkit-animation: carousel -5s ease 0s alternate none infinite; animation: carousel -5s ease 0s alternate none infinite;
}
.star:nth-child(11) { left: 89vw; top: 74vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 200s ease 0s alternate none infinite; animation: carousel 200s ease 0s alternate none infinite;
}
.star:nth-child(12) { left: 97vw; top: 19vh; opacity: 0.5; height: 5px; width: 5px; -webkit-animation: carousel 331s ease 0s alternate none infinite; animation: carousel 331s ease 0s alternate none infinite;
}
.star:nth-child(13) { left: 50vw; top: 10vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel 319s ease 0s alternate none infinite; animation: carousel 319s ease 0s alternate none infinite;
}
.star:nth-child(14) { left: 46vw; top: 87vh; opacity: 0.6; height: 6px; width: 6px; -webkit-animation: carousel 288s ease 0s alternate none infinite; animation: carousel 288s ease 0s alternate none infinite;
}
.star:nth-child(15) { left: 13vw; top: 11vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel 344s ease 0s alternate none infinite; animation: carousel 344s ease 0s alternate none infinite;
}
.star:nth-child(16) { left: 52vw; top: 56vh; opacity: 0.4; height: 4px; width: 4px; -webkit-animation: carousel -70s ease 0s alternate none infinite; animation: carousel -70s ease 0s alternate none infinite;
}
.star:nth-child(17) { left: 81vw; top: 33vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel 201s ease 0s alternate none infinite; animation: carousel 201s ease 0s alternate none infinite;
}
.star:nth-child(18) { left: 56vw; top: 6vh; opacity: 0.4; height: 4px; width: 4px; -webkit-animation: carousel 135s ease 0s alternate none infinite; animation: carousel 135s ease 0s alternate none infinite;
}
.star:nth-child(19) { left: 31vw; top: 5vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel 136s ease 0s alternate none infinite; animation: carousel 136s ease 0s alternate none infinite;
}
.star:nth-child(20) { left: 61vw; top: 19vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 367s ease 0s alternate none infinite; animation: carousel 367s ease 0s alternate none infinite;
}
.star:nth-child(21) { left: 94vw; top: 25vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 65s ease 0s alternate none infinite; animation: carousel 65s ease 0s alternate none infinite;
}
.star:nth-child(22) { left: 98vw; top: 91vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel -71s ease 0s alternate none infinite; animation: carousel -71s ease 0s alternate none infinite;
}
.star:nth-child(23) { left: 42vw; top: 19vh; opacity: 0.2; height: 2px; width: 2px; -webkit-animation: carousel 77s ease 0s alternate none infinite; animation: carousel 77s ease 0s alternate none infinite;
}
.star:nth-child(24) { left: 96vw; top: 79vh; opacity: 0.2; height: 2px; width: 2px; -webkit-animation: carousel 314s ease 0s alternate none infinite; animation: carousel 314s ease 0s alternate none infinite;
}
.star:nth-child(25) { left: 76vw; top: 45vh; opacity: 0.1; height: 1px; width: 1px; -webkit-animation: carousel 313s ease 0s alternate none infinite; animation: carousel 313s ease 0s alternate none infinite;
}
.star:nth-child(26) { left: 89vw; top: 14vh; opacity: 0.9; height: 9px; width: 9px; -webkit-animation: carousel 0s ease 0s alternate none infinite; animation: carousel 0s ease 0s alternate none infinite;
}
.star:nth-child(27) { left: 67vw; top: 17vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel -50s ease 0s alternate none infinite; animation: carousel -50s ease 0s alternate none infinite;
}
.star:nth-child(28) { left: 96vw; top: 99vh; opacity: 0.3; height: 3px; width: 3px; -webkit-animation: carousel -37s ease 0s alternate none infinite; animation: carousel -37s ease 0s alternate none infinite;
}
.star:nth-child(29) { left: 42vw; top: 88vh; opacity: 0.1; height: 1px; width: 1px; -webkit-animation: carousel 67s ease 0s alternate none infinite; animation: carousel 67s ease 0s alternate none infinite;
}
.star:nth-child(30) { left: 94vw; top: 76vh; opacity: 0.1; height: 1px; width: 1px; -webkit-animation: carousel 49s ease 0s alternate none infinite; animation: carousel 49s ease 0s alternate none infinite;
}
.star:nth-child(31) { left: 47vw; top: 31vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel 378s ease 0s alternate none infinite; animation: carousel 378s ease 0s alternate none infinite;
}
.star:nth-child(32) { left: 79vw; top: 17vh; opacity: 0.5; height: 5px; width: 5px; -webkit-animation: carousel 38s ease 0s alternate none infinite; animation: carousel 38s ease 0s alternate none infinite;
}
.star:nth-child(33) { left: 44vw; top: 66vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel -53s ease 0s alternate none infinite; animation: carousel -53s ease 0s alternate none infinite;
}
.star:nth-child(34) { left: 9vw; top: 62vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel 32s ease 0s alternate none infinite; animation: carousel 32s ease 0s alternate none infinite;
}
.star:nth-child(35) { left: 95vw; top: 63vh; opacity: 0.5; height: 5px; width: 5px; -webkit-animation: carousel -15s ease 0s alternate none infinite; animation: carousel -15s ease 0s alternate none infinite;
}
.star:nth-child(36) { left: 16vw; top: 14vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 57s ease 0s alternate none infinite; animation: carousel 57s ease 0s alternate none infinite;
}
.star:nth-child(37) { left: 42vw; top: 51vh; opacity: 0.9; height: 9px; width: 9px; -webkit-animation: carousel 57s ease 0s alternate none infinite; animation: carousel 57s ease 0s alternate none infinite;
}
.star:nth-child(38) { left: 79vw; top: 96vh; opacity: 0.1; height: 1px; width: 1px; -webkit-animation: carousel 225s ease 0s alternate none infinite; animation: carousel 225s ease 0s alternate none infinite;
}
.star:nth-child(39) { left: 57vw; top: 52vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel 329s ease 0s alternate none infinite; animation: carousel 329s ease 0s alternate none infinite;
}
.star:nth-child(40) { left: 73vw; top: 97vh; opacity: 1; height: 10px; width: 10px; -webkit-animation: carousel -12s ease 0s alternate none infinite; animation: carousel -12s ease 0s alternate none infinite;
}
.star:nth-child(41) { left: 77vw; top: 45vh; opacity: 0.3; height: 3px; width: 3px; -webkit-animation: carousel 373s ease 0s alternate none infinite; animation: carousel 373s ease 0s alternate none infinite;
}
.star:nth-child(42) { left: 10vw; top: 29vh; opacity: 0.8; height: 8px; width: 8px; -webkit-animation: carousel 325s ease 0s alternate none infinite; animation: carousel 325s ease 0s alternate none infinite;
}
.star:nth-child(43) { left: 73vw; top: 38vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel 348s ease 0s alternate none infinite; animation: carousel 348s ease 0s alternate none infinite;
}
.star:nth-child(44) { left: 4vw; top: 58vh; opacity: 0.4; height: 4px; width: 4px; -webkit-animation: carousel 145s ease 0s alternate none infinite; animation: carousel 145s ease 0s alternate none infinite;
}
.star:nth-child(45) { left: 46vw; top: 6vh; opacity: 0.6; height: 6px; width: 6px; -webkit-animation: carousel 395s ease 0s alternate none infinite; animation: carousel 395s ease 0s alternate none infinite;
}
.star:nth-child(46) { left: 51vw; top: 92vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel 76s ease 0s alternate none infinite; animation: carousel 76s ease 0s alternate none infinite;
}
.star:nth-child(47) { left: 52vw; top: 97vh; opacity: 0.6; height: 6px; width: 6px; -webkit-animation: carousel 31s ease 0s alternate none infinite; animation: carousel 31s ease 0s alternate none infinite;
}
.star:nth-child(48) { left: 33vw; top: 21vh; opacity: 0.2; height: 2px; width: 2px; -webkit-animation: carousel 207s ease 0s alternate none infinite; animation: carousel 207s ease 0s alternate none infinite;
}
.star:nth-child(49) { left: 14vw; top: 62vh; opacity: 0.7; height: 7px; width: 7px; -webkit-animation: carousel -51s ease 0s alternate none infinite; animation: carousel -51s ease 0s alternate none infinite;
}
.star:nth-child(50) { left: 90vw; top: 38vh; opacity: 0.3; height: 3px; width: 3px; -webkit-animation: carousel 95s ease 0s alternate none infinite; animation: carousel 95s ease 0s alternate none infinite;
}
@-webkit-keyframes carousel { 0% { left: -10vw; } 100% { left: 110vw; }
}
@keyframes carousel { 0% { left: -10vw; } 100% { left: 110vw; }
}

Home Page	Home
Developer	Ash
Username	littleginger
Uploaded	August 09, 2022
Rating	3.5
Size	2,982 Kb
Views	40,480

Do you need developer help for Star Thing?

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!

Ash (littleginger) Script Codes

Name	Size
Sidebar Demo	2,612 Kb
Contact Envelope	3,257 Kb
Squares	2,348 Kb
Cute Bunny	3,761 Kb
Me	2,544 Kb
Pixel Cafe Menu	5,209 Kb
Codepen profile CSS	2,345 Kb
Emoji	2,765 Kb
A Pen by Ash	2,386 Kb
Telescope	2,241 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
Slide out Menu	Rbiggs	4,936 Kb
Loading Bar	Jaradlight	2,333 Kb
Sticky notes with CSS3	HaiNguyen007	2,146 Kb
Angular-HAML	Cwacht	2,022 Kb
Gradients	Karpovsystems	2,394 Kb
Social.svg.min	Larsenwork	13,849 Kb
Cartoon Bomb	Tcmulder	4,929 Kb
Simple checkbox style	Vncnz	2,628 Kb
Day 1 - Portfolio	Chpecson	3,532 Kb
Loading animation - freedom purchase	Rocbear	2,567 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!