Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Meteor (Nitrogen & Oxygen)</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="one">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="two">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="three">
<ul>
<li></li>
<li></li>
<li class="floating1"></li>
<li class="floating1"></li>
<li class="floating2"></li>
<li class="floating2"></li>
</ul>
</div>
<div class="four">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="floating"></li>
<li class="floating"></li>
<li class="floating"></li>
<li class="floating"></li>
</ul>
<span class="smile"></span>
<span class="eyes"></span>
<span class="cheeks"></span>
</div>
<div class="random-stars">
<div class="random-star"></div>
<div class="random-star"></div>
<div class="random-star"></div>
<div class="random-star"></div>
</div>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
background: #131417;
overflow: hidden;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 85px;
width: 100px;
background: #ffffff;
border-radius: 100px 0 0 100px;
box-shadow: 0 0 16px #ffffff;
}
div ul li {
list-style: none;
display: block;
}
div:nth-child(1) {
height: 130px;
width: 145px;
background-color: #54110a;
box-shadow: 2px 0 10px #54110a, -5px 0 10px #c65248;
}
div:nth-child(1) li:nth-child(1), div:nth-child(1) div:nth-child(3) .floating1, div:nth-child(3) div:nth-child(1) .floating1 {
height: 32.5px;
width: 158px;
background: linear-gradient(to right, #54110a 60%, transparent);
border-radius: 80px;
margin-left: 70px;
animation: glowAnim 0.5s ease-in-out 0.2s infinite;
}
div:nth-child(1) li:nth-child(2), div:nth-child(1) div:nth-child(3) .floating2, div:nth-child(3) div:nth-child(1) .floating2 {
height: 32.5px;
width: 145px;
background: linear-gradient(to right, #54110a 60%, transparent);
border-radius: 80px;
margin-left: 70px;
animation: glowAnim 2s ease-in-out 0.4s infinite;
}
div:nth-child(1) li:nth-child(3) {
height: 32.5px;
width: 142px;
background: linear-gradient(to right, #54110a 60%, transparent);
border-radius: 80px;
margin-left: 70px;
animation: glowAnim 4.5s ease-in-out 0.6s infinite;
}
div:nth-child(1) li:nth-child(4) {
height: 32.5px;
width: 135px;
background: linear-gradient(to right, #54110a 60%, transparent);
border-radius: 80px;
margin-left: 70px;
animation: glowAnim 6s ease-in-out 0.8s infinite;
}
div:nth-child(2) {
height: 115px;
width: 130px;
background-color: #dc9297;
opacity: 0.6;
box-shadow: 0 0 15px #dc9297;
}
div:nth-child(2) li:nth-child(1), div:nth-child(2) div:nth-child(3) .floating1, div:nth-child(3) div:nth-child(2) .floating1 {
height: 40px;
width: 170px;
background: linear-gradient(to right, #dc9297 50%, transparent);
border-radius: 200px;
margin-left: 50px;
animation: glowAnim 3s ease-in-out 0.5s infinite;
}
div:nth-child(2) li:nth-child(2), div:nth-child(2) div:nth-child(3) .floating2, div:nth-child(3) div:nth-child(2) .floating2 {
height: 40px;
width: 160px;
background: linear-gradient(to right, #dc9297 50%, transparent);
border-radius: 200px;
margin-top: 35px;
margin-left: 50px;
animation: glowAnim 2.5s ease-in-out 0.8s infinite;
}
@keyframes glowAnim {
0%, 100% {
width: 120px;
}
25% {
width: 200px;
}
}
div:nth-child(3) {
height: 100px;
width: 100px;
background-color: #dc9297;
margin-left: -8px;
box-shadow: 0 0 15px #dc9297;
}
div:nth-child(3) li:nth-child(1), div:nth-child(3) .floating1 {
position: relative;
left: 0;
height: 10px;
width: 55px;
background: #dc9297;
border-radius: 300px;
margin-left: 50px;
transition: all 0.3s ease;
animation: anim1 1s ease infinite;
}
div:nth-child(3) li:nth-child(2), div:nth-child(3) .floating2 {
position: relative;
left: 0;
height: 10px;
width: 90px;
background: #dc9297;
border-radius: 300px;
margin-top: 80px;
margin-left: 50px;
transition: all 0.3s ease;
animation: anim1 1s ease 0.5s infinite;
}
@keyframes anim1 {
0%, 100% {
left: 0;
}
50% {
left: 30px;
}
}
div:nth-child(3) .floating1 {
position: absolute;
top: 0;
box-shadow: 0 0 5px #dc9297;
}
div:nth-child(3) .floating2 {
position: absolute;
bottom: 0;
}
div:nth-child(3) li:nth-child(3) .floating1 {
left: 65px;
width: 40px;
animation: f1 2s ease-out infinite;
}
@keyframes f1 {
0% {
left: 15px;
width: 70px;
}
50% {
left: 150px;
width: 50px;
opacity: 0.5;
}
60% {
left: 150px;
width: 4px;
opacity: 0;
}
100% {
left: 15px;
width: 0;
opacity: 0;
}
}
div:nth-child(3) li:nth-child(4).floating1 {
left: 115px;
width: 15px;
animation: f11 1.8s ease-out infinite;
}
div:nth-child(3) li:nth-child(5).floating2 {
left: 0;
width: 30px;
animation: f11 1s ease-out 0.3s infinite;
}
div:nth-child(3) li:nth-child(6).floating2 {
left: 0;
width: 10px;
animation: f11 1.5s ease-out 0.5s infinite;
}
@keyframes f11 {
0% {
left: 65px;
}
50% {
left: 185px;
opacity: 0.5;
}
60% {
left: 185px;
opacity: 0;
}
100% {
left: 65px;
opacity: 0;
}
}
div:nth-child(4) {
height: 80px;
width: 80px;
margin-left: -10px;
}
div:nth-child(4) span {
position: absolute;
display: block;
}
div:nth-child(4) .eyes {
top: 30px;
left: 25px;
height: 10px;
width: 10px;
background: #000000;
border-radius: 50%;
}
div:nth-child(4) .eyes::after {
content: "";
position: absolute;
left: 28px;
height: 10px;
width: 10px;
background: #000000;
border-radius: 50%;
}
div:nth-child(4) .smile {
position: absolute;
top: 38px;
left: 36px;
height: 6px;
width: 10px;
background: transparent;
border: 4px solid #000000;
border-bottom-left-radius: 90px;
border-bottom-right-radius: 90px;
}
div:nth-child(4) .smile::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
height: 5px;
width: 23px;
background: #ffffff;
}
div:nth-child(4) .cheeks {
position: absolute;
top: 40px;
left: 20px;
display: block;
height: 10px;
width: 10px;
background: #dc9297;
border-radius: 200px;
}
div:nth-child(4) .cheeks::after {
content: "";
position: absolute;
top: 0;
left: 40px;
height: 10px;
width: 10px;
background: #dc9297;
border-radius: 200px;
}
div:nth-child(4) li {
position: relative;
transition: all 0.2s ease;
}
div:nth-child(4) li:nth-child(1), div:nth-child(4) div:nth-child(3) .floating1, div:nth-child(3) div:nth-child(4) .floating1 {
left: 50px;
height: 12px;
width: 90px;
background: #ffffff;
border-radius: 200px;
box-shadow: 0 0 10px #ffffff;
animation: anim2 1.5s ease-out infinite;
}
div:nth-child(4) li:nth-child(2), div:nth-child(4) div:nth-child(3) .floating2, div:nth-child(3) div:nth-child(4) .floating2 {
height: 10px;
width: 70px;
background: radial-gradient(circle at 100% 50%, transparent 4px, #ffffff 5px);
margin-left: 50px;
animation: anim3 1.6s ease-out 0.5s infinite;
}
div:nth-child(4) li:nth-child(3) {
left: 45px;
height: 12px;
width: 105px;
background: #ffffff;
border-radius: 200px;
box-shadow: 0 0 10px #ffffff;
animation: anim2 1.2s ease-out 1s infinite;
}
div:nth-child(4) li:nth-child(4) {
height: 10px;
width: 65px;
background: radial-gradient(circle at 100% 50%, transparent 4px, #ffffff 5px);
margin-left: 70px;
animation: anim3 2s ease-out 0.5s infinite;
}
div:nth-child(4) li:nth-child(5) {
left: 60px;
height: 12px;
width: 85px;
background: #ffffff;
border-radius: 200px;
box-shadow: 0 0 10px #ffffff;
animation: anim4 2s ease-out 0.5s infinite;
}
@keyframes anim4 {
0%, 100% {
left: 60px;
}
50% {
left: 80px;
}
}
div:nth-child(4) li:nth-child(6) {
height: 12px;
width: 65px;
background: radial-gradient(circle at 100% 50%, transparent 5px, #ffffff 6px);
margin-left: 75px;
animation: anim3 1s ease-out 0.5s infinite;
}
@keyframes anim3 {
0%, 100% {
left: 0;
}
50% {
left: 5px;
}
}
div:nth-child(4) li:nth-child(7) {
left: 55px;
height: 12px;
width: 100px;
background: #ffffff;
border-radius: 200px;
box-shadow: 0 0 10px #ffffff;
animation: anim2 1.3s ease-out 0.5s infinite;
}
@keyframes anim2 {
0%, 100% {
left: 45px;
}
50% {
left: 65px;
}
}
div:nth-child(4) .floating {
position: absolute;
background: #ffffff;
border-radius: 100px;
box-shadow: 0 0 1px #dc9297;
transition: all 0.5s ease;
z-index: -2;
opacity: 0;
}
div:nth-child(4) li:nth-child(8).floating {
top: 0;
left: 50px;
height: 12px;
width: 12px;
animation: float1 3s ease 0.4s infinite;
}
@keyframes float1 {
0%, 100% {
left: 50px;
opacity: 0;
}
50% {
left: 160px;
opacity: 1;
}
70% {
left: 160px;
opacity: 0;
}
}
div:nth-child(4) li:nth-child(9).floating {
top: 22px;
height: 12px;
width: 12px;
animation: float2 3s ease 2.5s infinite;
}
@keyframes float2 {
0%, 100% {
left: 60px;
opacity: 0;
}
50% {
left: 175px;
opacity: 1;
}
70% {
left: 175px;
opacity: 0;
}
}
div:nth-child(4) li:nth-child(10).floating {
top: 44px;
left: 50px;
height: 12px;
width: 12px;
animation: float3 3s ease 1.5s infinite;
}
@keyframes float3 {
0%, 100% {
left: 50px;
opacity: 0;
}
50% {
left: 160px;
opacity: 1;
}
70% {
left: 160px;
opacity: 0;
}
}
div:nth-child(4) li:nth-child(11).floating {
top: 67px;
left: 50px;
height: 12px;
width: 12px;
animation: float4 3s ease 1.5s infinite;
}
@keyframes float4 {
0%, 100% {
left: 50px;
opacity: 0;
}
50% {
left: 180px;
opacity: 1;
}
70% {
left: 180px;
opacity: 0;
}
}
.random-stars {
height: 50%;
width: 100%;
background: transparent;
box-shadow: none;
z-index: -1;
}
.random-stars .random-star {
position: absolute;
display: block;
opacity: 0;
animation: starAnim 2.5s ease infinite;
}
@keyframes starAnim {
0% {
left: 0;
opacity: 1;
}
50% {
left: 100%;
opacity: 1;
}
70% {
left: 100%;
opacity: 0;
}
100% {
left: 0;
opacity: 0;
}
}
.random-stars .random-star:nth-child(1) {
top: 50px;
left: 500px;
height: 15px;
width: 15px;
background: linear-gradient(to right, #ca710c, #c1b3d1);
border-radius: 100px;
animation-duration: 2s;
animation-delay: 0.5s;
}
.random-stars .random-star:nth-child(2) {
top: 80px;
left: 0;
height: 10px;
width: 10px;
background: linear-gradient(to right, #c1b3d1 30%, transparent);
border-radius: 100px;
}
.random-stars .random-star:nth-child(3) {
top: 130px;
left: 0;
height: 10px;
width: 10px;
background: linear-gradient(to right, #ca710c 20%, transparent);
border-radius: 100px;
animation-delay: 0.8s;
}
.random-stars .random-star:nth-child(4) {
top: 230px;
left: 0;
height: 12px;
width: 12px;
background: #c1b3d1;
border-radius: 100px;
animation-duration: 3.5s;
animation-delay: 0.2s;
}Thanks for visiting