Lantern animation html code download for free
index.html
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Html coding</title>5
</head>6
<body>7
<div class="lantern"></div>8
<div class="lantern"></div>9
<div class="lantern"></div>10
<div class="lantern"></div>11
</body>12
</html>styles.css
1
body {2
padding: 0;3
margin: 0;4
height: 100vh;5
display: flex;6
justify-content: space-evenly;7
align-items: flex-end;8
background-color: black;9
}10
11
lantern {12
height: 150px;13
width: 100px;14
background: rgb(255, 7, 7);15
position: relative;16
display: flex;17
justify-content: center;18
align-items: flex-end;19
animation: up 50s infinite;20
box-shadow: 1px 1px 50px 10px red;21
border-radius: 20px;22
}23
24
.lantern::after {25
content: "";26
opacity: 80%;27
width: 30px;28
height: 30px;29
border-radius: 100%;30
position: absolute;31
background: rgb(255, 132, 0);32
animation: light 5s infinite;33
}34
35
@keyframes light {36
0%, 100% {37
box-shadow: 1px 1px 20px 10px rgb(255, 132, 0);38
}39
50% {40
box-shadow: 1px 1px 20px 15px rgb(255, 132, 0);41
}42
}43
44
@keyframes up {45
0%, 100% {46
transform: translateY(0vh);47
}48
50% {49
transform: translateY(-120vh);50
}51
90% {52
transform: translateY(0px);53
}54
}55
56
.lantern:nth-child(2){57
animation: up 40s infinite;58
background-color: rgb(60, 255, 0);59
box-shadow: 1px 1px 50px 10px rgb(60, 255, 0);60
}61
.lantern:nth-child(3){62
animation: up 55s infinite;63
background-color: rgb(0, 8, 255);64
box-shadow: 1px 1px 50px 10px rgb(0, 8, 255);65
}66
.lantern:nth-child(4){67
animation: up 45s infinite;68
background-color: rgb(183, 0, 255);69
box-shadow: 1px 1px 50px 10px rgb(183, 0, 255);70
} 71
.lantern:nth-child(5){72
animation: up 40s infinite;73
background-color: rgb(30, 63, 136);74
box-shadow: 1px 1px 50px 10px rgb(30, 63, 136);75
} 76
77
@media (max-width: 650px){78
.lantern:nth-child(5){79
display: none:80
}81
}82
83
@media (max-width: 500px){84
.lantern:nth-child(4){85
display: none:86
}87
} 88
89
@media (max-width: 300px){90
.lantern:nth-child(3){91
display: none:92
}93
}94
95
@media (max-width: 200px){96
.lantern:nth-child(2){97
display: none:98
}99
}100
(Leave empty if not needed) */ main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
