السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh ^_^
Alhamdulillah saya masih di beri kesehatan dan kesempatan untuk menulis lagi di blog ini :D
tanpa berlama-lama langsung saja kita buat animasinya kalau pada tutorial sebelumnya animasi yang terakhir kita buat adalah
Animasi Lampu Merah Dengan CSS yang bisa anda lihat tutorial dan demonya
DISINI
Nah pada hari ini animasi yang akan saya buat adalah animasi binatang yaitu Animasi Pemandangan Gunung Dengan CSS, Pada animasi kali ini saya masih menggunakan fitur terbaru dari css 3, oh iya sekali lagi saya ingatkan animasi ini bukan buatan saya, animasi ini saya peroleh dari google, Animasi ini adalah salah satu karya dari programer australia yang bernama Samir Chahine anda bisa melihat profil dia melalui twitternya yaitu .
Animasi buatan beliau sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
perlu di ingatkan
animasi css ini hanya dapat di lihat pada browser yang sudah support HTML5 dan CSS3.
Oke, tidak usah berlama-lama lagi langsung saja ikuti tutorial
Cara Membuat Animasi Pemandangan Gunung Dengan CSS dengan baik dan benar..
1. Membuat File HTML
seperti tutorial-tutorial sebelumnya untuk membuat animasi jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Pemandangan Gunung</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="con">
<div class="theheader">
<h2>Beneath the Moonlight</h2><small>Samir Chahine</small>
</div>
<div class="h-con">
<div class="hill2"></div>
<div class="hill"></div>
<div class="hill3"></div>
</div>
<div class="moons">
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
<div class="moon"></div>
</div>
<div class="shoot"></div>
<div class="shoot"></div>
<div class="shoot"></div>
<div class="shoot"></div>
<div class="stars">
<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>
<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>
<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>
<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>
</div>
</div>
</body>
</html>
Html nya aja udah segini banyaknya apalagi css nya yaa. :D
Seperti biasanya sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa tulisan biasa
agar terbentuk Animasi pemandangan gunung nya Silahkan ikuti langkah selanjutnya untuk menambahkan stylenya
2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat animasi tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :
body, html {
margin: 0;
padding: 0;
background: #002142;
margin-top: -50px;
}
.con {
width: 100%;
background: #002142;
height: 900px;
position: relative;
overflow: hidden;
}
.theheader {
border: 5px solid #FEFDE8;
width: 200px;
height: 200px;
position: absolute;
font-family: 'Palanquin', sans-serif;
color: #FEFDE8;
margin-left: 20px;
margin-top: 450px;
text-align: center;
}
.shoot:nth-child(1) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-1 1s linear 1;
animation-delay: 0.01s;
}
@keyframes shoot-1 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 172px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(2) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-2 2s linear 1;
animation-delay: 0.02s;
}
@keyframes shoot-2 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 163px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(3) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-3 1s linear 1;
animation-delay: 0.03s;
}
@keyframes shoot-3 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 172px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(4) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-4 3s linear 1;
animation-delay: 0.04s;
}
@keyframes shoot-4 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 171px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(5) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-5 4s linear 1;
animation-delay: 0.05s;
}
@keyframes shoot-5 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 187px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(6) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-6 1s linear 1;
animation-delay: 0.06s;
}
@keyframes shoot-6 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 161px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(7) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-7 3s linear 1;
animation-delay: 0.07s;
}
@keyframes shoot-7 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 163px;
width: 0px;
height: 0px;
}
}
.shoot:nth-child(8) {
width: 5px;
height: 5px;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
z-index: 400;
position: absolute;
border-radius: 50%;
margin-left: -1040px;
animation: shoot-8 3s linear 1;
animation-delay: 0.08s;
}
@keyframes shoot-8 {
0% {
margin-left: 0px;
margin-top: 100px;
width: 8px;
height: 8px;
}
100% {
margin-left: 900px;
margin-top: 183px;
width: 0px;
height: 0px;
}
}
.moon:nth-child(1) {
width: 100px;
height: 100px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.2;
position: absolute;
z-index: 10;
margin-left: calc(50% - 100px/2);
margin-top: calc(400px - 100px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(2) {
width: 200px;
height: 200px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.1;
position: absolute;
z-index: 10;
margin-left: calc(50% - 200px/2);
margin-top: calc(400px - 200px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(3) {
width: 300px;
height: 300px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.06667;
position: absolute;
z-index: 10;
margin-left: calc(50% - 300px/2);
margin-top: calc(400px - 300px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(4) {
width: 400px;
height: 400px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.05;
position: absolute;
z-index: 10;
margin-left: calc(50% - 400px/2);
margin-top: calc(400px - 400px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(5) {
width: 500px;
height: 500px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.04;
position: absolute;
z-index: 10;
margin-left: calc(50% - 500px/2);
margin-top: calc(400px - 500px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(6) {
width: 600px;
height: 600px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.03333;
position: absolute;
z-index: 10;
margin-left: calc(50% - 600px/2);
margin-top: calc(400px - 600px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(7) {
width: 700px;
height: 700px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.02857;
position: absolute;
z-index: 10;
margin-left: calc(50% - 700px/2);
margin-top: calc(400px - 700px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.moon:nth-child(8) {
width: 800px;
height: 800px;
border-radius: 50%;
background: #FEFCE6;
box-shadow: 0px 1px 30px 0px white;
opacity: 0.025;
position: absolute;
z-index: 10;
margin-left: calc(50% - 800px/2);
margin-top: calc(400px - 800px/2);
}
.moon:nth-child(1) {
opacity: 1;
width: 150px;
z-index: 10;
height: 150px;
margin-left: calc(50% - 150px/2);
margin-top: calc(400px - 150px/2);
}
.stars {
width: 100%;
height: 875px;
overflow: hidden;
margin: 0 auto;
margin-top: 0px;
position: relative;
}
.star:nth-child(0) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1444px;
margin-top: 358px;
animation: twinkle-0 1s linear infinite;
animation-delay: 0s;
}
@keyframes twinkle-0 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(1) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1414px;
margin-top: 163px;
animation: twinkle-1 1s linear infinite;
animation-delay: 0.01s;
}
@keyframes twinkle-1 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(2) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 87px;
margin-top: 425px;
animation: twinkle-2 1s linear infinite;
animation-delay: 0.02s;
}
@keyframes twinkle-2 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(3) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 586px;
margin-top: 764px;
animation: twinkle-3 1s linear infinite;
animation-delay: 0.03s;
}
@keyframes twinkle-3 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(4) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 651px;
margin-top: 237px;
animation: twinkle-4 1s linear infinite;
animation-delay: 0.04s;
}
@keyframes twinkle-4 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(5) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1489px;
margin-top: 328px;
animation: twinkle-5 1s linear infinite;
animation-delay: 0.05s;
}
@keyframes twinkle-5 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(6) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 365px;
margin-top: 191px;
animation: twinkle-6 1s linear infinite;
animation-delay: 0.06s;
}
@keyframes twinkle-6 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(7) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1272px;
margin-top: 323px;
animation: twinkle-7 1s linear infinite;
animation-delay: 0.07s;
}
@keyframes twinkle-7 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(8) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 782px;
margin-top: 284px;
animation: twinkle-8 1s linear infinite;
animation-delay: 0.08s;
}
@keyframes twinkle-8 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(9) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1492px;
margin-top: 709px;
animation: twinkle-9 1s linear infinite;
animation-delay: 0.09s;
}
@keyframes twinkle-9 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(10) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 664px;
margin-top: 101px;
animation: twinkle-10 1s linear infinite;
animation-delay: 0.1s;
}
@keyframes twinkle-10 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(11) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 485px;
margin-top: 344px;
animation: twinkle-11 1s linear infinite;
animation-delay: 0.11s;
}
@keyframes twinkle-11 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(12) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 903px;
margin-top: 296px;
animation: twinkle-12 1s linear infinite;
animation-delay: 0.12s;
}
@keyframes twinkle-12 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(13) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 910px;
margin-top: 70px;
animation: twinkle-13 1s linear infinite;
animation-delay: 0.13s;
}
@keyframes twinkle-13 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(14) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 438px;
margin-top: 315px;
animation: twinkle-14 1s linear infinite;
animation-delay: 0.14s;
}
@keyframes twinkle-14 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(15) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 719px;
margin-top: 49px;
animation: twinkle-15 1s linear infinite;
animation-delay: 0.15s;
}
@keyframes twinkle-15 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(16) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 547px;
margin-top: 404px;
animation: twinkle-16 1s linear infinite;
animation-delay: 0.16s;
}
@keyframes twinkle-16 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(17) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 780px;
margin-top: 143px;
animation: twinkle-17 1s linear infinite;
animation-delay: 0.17s;
}
@keyframes twinkle-17 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(18) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1353px;
margin-top: 274px;
animation: twinkle-18 1s linear infinite;
animation-delay: 0.18s;
}
@keyframes twinkle-18 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(19) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 724px;
margin-top: 49px;
animation: twinkle-19 1s linear infinite;
animation-delay: 0.19s;
}
@keyframes twinkle-19 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(20) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 721px;
margin-top: 704px;
animation: twinkle-20 1s linear infinite;
animation-delay: 0.2s;
}
@keyframes twinkle-20 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(21) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 788px;
margin-top: 617px;
animation: twinkle-21 1s linear infinite;
animation-delay: 0.21s;
}
@keyframes twinkle-21 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(22) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 26px;
margin-top: 472px;
animation: twinkle-22 1s linear infinite;
animation-delay: 0.22s;
}
@keyframes twinkle-22 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(23) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1256px;
margin-top: 600px;
animation: twinkle-23 1s linear infinite;
animation-delay: 0.23s;
}
@keyframes twinkle-23 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(24) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 145px;
margin-top: 596px;
animation: twinkle-24 1s linear infinite;
animation-delay: 0.24s;
}
@keyframes twinkle-24 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(25) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1072px;
margin-top: 759px;
animation: twinkle-25 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes twinkle-25 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(26) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 420px;
margin-top: 211px;
animation: twinkle-26 1s linear infinite;
animation-delay: 0.26s;
}
@keyframes twinkle-26 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(27) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1445px;
margin-top: 11px;
animation: twinkle-27 1s linear infinite;
animation-delay: 0.27s;
}
@keyframes twinkle-27 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(28) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1486px;
margin-top: 429px;
animation: twinkle-28 1s linear infinite;
animation-delay: 0.28s;
}
@keyframes twinkle-28 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(29) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1063px;
margin-top: 345px;
animation: twinkle-29 1s linear infinite;
animation-delay: 0.29s;
}
@keyframes twinkle-29 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(30) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 520px;
margin-top: 342px;
animation: twinkle-30 1s linear infinite;
animation-delay: 0.3s;
}
@keyframes twinkle-30 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(31) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 836px;
margin-top: 207px;
animation: twinkle-31 1s linear infinite;
animation-delay: 0.31s;
}
@keyframes twinkle-31 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(32) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1060px;
margin-top: 614px;
animation: twinkle-32 1s linear infinite;
animation-delay: 0.32s;
}
@keyframes twinkle-32 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(33) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1382px;
margin-top: 268px;
animation: twinkle-33 1s linear infinite;
animation-delay: 0.33s;
}
@keyframes twinkle-33 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(34) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 470px;
margin-top: 801px;
animation: twinkle-34 1s linear infinite;
animation-delay: 0.34s;
}
@keyframes twinkle-34 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(35) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1418px;
margin-top: 716px;
animation: twinkle-35 1s linear infinite;
animation-delay: 0.35s;
}
@keyframes twinkle-35 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(36) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 241px;
margin-top: 469px;
animation: twinkle-36 1s linear infinite;
animation-delay: 0.36s;
}
@keyframes twinkle-36 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(37) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 712px;
margin-top: 642px;
animation: twinkle-37 1s linear infinite;
animation-delay: 0.37s;
}
@keyframes twinkle-37 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(38) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1321px;
margin-top: 400px;
animation: twinkle-38 1s linear infinite;
animation-delay: 0.38s;
}
@keyframes twinkle-38 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(39) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 722px;
margin-top: 799px;
animation: twinkle-39 1s linear infinite;
animation-delay: 0.39s;
}
@keyframes twinkle-39 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(40) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1283px;
margin-top: 370px;
animation: twinkle-40 1s linear infinite;
animation-delay: 0.4s;
}
@keyframes twinkle-40 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(41) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1438px;
margin-top: 867px;
animation: twinkle-41 1s linear infinite;
animation-delay: 0.41s;
}
@keyframes twinkle-41 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(42) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1162px;
margin-top: 252px;
animation: twinkle-42 1s linear infinite;
animation-delay: 0.42s;
}
@keyframes twinkle-42 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(43) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1408px;
margin-top: 526px;
animation: twinkle-43 1s linear infinite;
animation-delay: 0.43s;
}
@keyframes twinkle-43 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(44) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1395px;
margin-top: 695px;
animation: twinkle-44 1s linear infinite;
animation-delay: 0.44s;
}
@keyframes twinkle-44 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(45) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1161px;
margin-top: 425px;
animation: twinkle-45 1s linear infinite;
animation-delay: 0.45s;
}
@keyframes twinkle-45 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(46) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 155px;
margin-top: 113px;
animation: twinkle-46 1s linear infinite;
animation-delay: 0.46s;
}
@keyframes twinkle-46 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(47) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 645px;
margin-top: 512px;
animation: twinkle-47 1s linear infinite;
animation-delay: 0.47s;
}
@keyframes twinkle-47 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(48) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 115px;
margin-top: 324px;
animation: twinkle-48 1s linear infinite;
animation-delay: 0.48s;
}
@keyframes twinkle-48 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(49) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 931px;
margin-top: 768px;
animation: twinkle-49 1s linear infinite;
animation-delay: 0.49s;
}
@keyframes twinkle-49 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(50) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1060px;
margin-top: 371px;
animation: twinkle-50 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes twinkle-50 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(51) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 702px;
margin-top: 143px;
animation: twinkle-51 1s linear infinite;
animation-delay: 0.51s;
}
@keyframes twinkle-51 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(52) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 906px;
margin-top: 154px;
animation: twinkle-52 1s linear infinite;
animation-delay: 0.52s;
}
@keyframes twinkle-52 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(53) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 440px;
margin-top: 257px;
animation: twinkle-53 1s linear infinite;
animation-delay: 0.53s;
}
@keyframes twinkle-53 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(54) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 774px;
margin-top: 430px;
animation: twinkle-54 1s linear infinite;
animation-delay: 0.54s;
}
@keyframes twinkle-54 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(55) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1183px;
margin-top: 419px;
animation: twinkle-55 1s linear infinite;
animation-delay: 0.55s;
}
@keyframes twinkle-55 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(56) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 326px;
margin-top: 383px;
animation: twinkle-56 1s linear infinite;
animation-delay: 0.56s;
}
@keyframes twinkle-56 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(57) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1207px;
margin-top: 540px;
animation: twinkle-57 1s linear infinite;
animation-delay: 0.57s;
}
@keyframes twinkle-57 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(58) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 697px;
margin-top: 720px;
animation: twinkle-58 1s linear infinite;
animation-delay: 0.58s;
}
@keyframes twinkle-58 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(59) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 790px;
margin-top: 359px;
animation: twinkle-59 1s linear infinite;
animation-delay: 0.59s;
}
@keyframes twinkle-59 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(60) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 104px;
margin-top: 665px;
animation: twinkle-60 1s linear infinite;
animation-delay: 0.6s;
}
@keyframes twinkle-60 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(61) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1144px;
margin-top: 624px;
animation: twinkle-61 1s linear infinite;
animation-delay: 0.61s;
}
@keyframes twinkle-61 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(62) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 255px;
margin-top: 17px;
animation: twinkle-62 1s linear infinite;
animation-delay: 0.62s;
}
@keyframes twinkle-62 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(63) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 790px;
margin-top: 643px;
animation: twinkle-63 1s linear infinite;
animation-delay: 0.63s;
}
@keyframes twinkle-63 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(64) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 2px;
margin-top: 399px;
animation: twinkle-64 1s linear infinite;
animation-delay: 0.64s;
}
@keyframes twinkle-64 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(65) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 136px;
margin-top: 259px;
animation: twinkle-65 1s linear infinite;
animation-delay: 0.65s;
}
@keyframes twinkle-65 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(66) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1419px;
margin-top: 751px;
animation: twinkle-66 1s linear infinite;
animation-delay: 0.66s;
}
@keyframes twinkle-66 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(67) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 301px;
margin-top: 73px;
animation: twinkle-67 1s linear infinite;
animation-delay: 0.67s;
}
@keyframes twinkle-67 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(68) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 12px;
margin-top: 535px;
animation: twinkle-68 1s linear infinite;
animation-delay: 0.68s;
}
@keyframes twinkle-68 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(69) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1476px;
margin-top: 403px;
animation: twinkle-69 1s linear infinite;
animation-delay: 0.69s;
}
@keyframes twinkle-69 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(70) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 546px;
margin-top: 621px;
animation: twinkle-70 1s linear infinite;
animation-delay: 0.7s;
}
@keyframes twinkle-70 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(71) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 760px;
margin-top: 860px;
animation: twinkle-71 1s linear infinite;
animation-delay: 0.71s;
}
@keyframes twinkle-71 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(72) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 106px;
margin-top: 443px;
animation: twinkle-72 1s linear infinite;
animation-delay: 0.72s;
}
@keyframes twinkle-72 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(73) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 879px;
margin-top: 325px;
animation: twinkle-73 1s linear infinite;
animation-delay: 0.73s;
}
@keyframes twinkle-73 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(74) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 120px;
margin-top: 44px;
animation: twinkle-74 1s linear infinite;
animation-delay: 0.74s;
}
@keyframes twinkle-74 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(75) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 453px;
margin-top: 225px;
animation: twinkle-75 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes twinkle-75 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(76) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 700px;
margin-top: 849px;
animation: twinkle-76 1s linear infinite;
animation-delay: 0.76s;
}
@keyframes twinkle-76 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(77) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1052px;
margin-top: 456px;
animation: twinkle-77 1s linear infinite;
animation-delay: 0.77s;
}
@keyframes twinkle-77 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(78) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 408px;
margin-top: 105px;
animation: twinkle-78 1s linear infinite;
animation-delay: 0.78s;
}
@keyframes twinkle-78 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(79) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 494px;
margin-top: 755px;
animation: twinkle-79 1s linear infinite;
animation-delay: 0.79s;
}
@keyframes twinkle-79 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(80) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 858px;
margin-top: 667px;
animation: twinkle-80 1s linear infinite;
animation-delay: 0.8s;
}
@keyframes twinkle-80 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(81) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1113px;
margin-top: 328px;
animation: twinkle-81 1s linear infinite;
animation-delay: 0.81s;
}
@keyframes twinkle-81 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(82) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1412px;
margin-top: 749px;
animation: twinkle-82 1s linear infinite;
animation-delay: 0.82s;
}
@keyframes twinkle-82 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(83) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 816px;
margin-top: 266px;
animation: twinkle-83 1s linear infinite;
animation-delay: 0.83s;
}
@keyframes twinkle-83 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(84) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1359px;
margin-top: 859px;
animation: twinkle-84 1s linear infinite;
animation-delay: 0.84s;
}
@keyframes twinkle-84 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(85) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 264px;
margin-top: 629px;
animation: twinkle-85 1s linear infinite;
animation-delay: 0.85s;
}
@keyframes twinkle-85 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(86) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1087px;
margin-top: 371px;
animation: twinkle-86 1s linear infinite;
animation-delay: 0.86s;
}
@keyframes twinkle-86 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(87) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1336px;
margin-top: 58px;
animation: twinkle-87 1s linear infinite;
animation-delay: 0.87s;
}
@keyframes twinkle-87 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(88) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1061px;
margin-top: 518px;
animation: twinkle-88 1s linear infinite;
animation-delay: 0.88s;
}
@keyframes twinkle-88 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(89) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 602px;
margin-top: 356px;
animation: twinkle-89 1s linear infinite;
animation-delay: 0.89s;
}
@keyframes twinkle-89 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(90) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 117px;
margin-top: 483px;
animation: twinkle-90 1s linear infinite;
animation-delay: 0.9s;
}
@keyframes twinkle-90 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(91) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 346px;
margin-top: 12px;
animation: twinkle-91 1s linear infinite;
animation-delay: 0.91s;
}
@keyframes twinkle-91 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(92) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 126px;
margin-top: 350px;
animation: twinkle-92 1s linear infinite;
animation-delay: 0.92s;
}
@keyframes twinkle-92 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(93) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 363px;
margin-top: 455px;
animation: twinkle-93 1s linear infinite;
animation-delay: 0.93s;
}
@keyframes twinkle-93 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(94) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 744px;
margin-top: 558px;
animation: twinkle-94 1s linear infinite;
animation-delay: 0.94s;
}
@keyframes twinkle-94 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(95) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 213px;
margin-top: 763px;
animation: twinkle-95 1s linear infinite;
animation-delay: 0.95s;
}
@keyframes twinkle-95 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(96) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 729px;
margin-top: 65px;
animation: twinkle-96 1s linear infinite;
animation-delay: 0.96s;
}
@keyframes twinkle-96 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(97) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 521px;
margin-top: 431px;
animation: twinkle-97 1s linear infinite;
animation-delay: 0.97s;
}
@keyframes twinkle-97 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(98) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 985px;
margin-top: 663px;
animation: twinkle-98 1s linear infinite;
animation-delay: 0.98s;
}
@keyframes twinkle-98 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(99) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 931px;
margin-top: 790px;
animation: twinkle-99 1s linear infinite;
animation-delay: 0.99s;
}
@keyframes twinkle-99 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(100) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 681px;
margin-top: 314px;
animation: twinkle-100 1s linear infinite;
animation-delay: 1s;
}
@keyframes twinkle-100 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(101) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 730px;
margin-top: 319px;
animation: twinkle-101 1s linear infinite;
animation-delay: 1.01s;
}
@keyframes twinkle-101 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(102) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1110px;
margin-top: 500px;
animation: twinkle-102 1s linear infinite;
animation-delay: 1.02s;
}
@keyframes twinkle-102 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(103) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1398px;
margin-top: 702px;
animation: twinkle-103 1s linear infinite;
animation-delay: 1.03s;
}
@keyframes twinkle-103 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(104) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 926px;
margin-top: 97px;
animation: twinkle-104 1s linear infinite;
animation-delay: 1.04s;
}
@keyframes twinkle-104 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(105) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 659px;
margin-top: 104px;
animation: twinkle-105 1s linear infinite;
animation-delay: 1.05s;
}
@keyframes twinkle-105 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(106) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 183px;
margin-top: 528px;
animation: twinkle-106 1s linear infinite;
animation-delay: 1.06s;
}
@keyframes twinkle-106 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(107) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1322px;
margin-top: 359px;
animation: twinkle-107 1s linear infinite;
animation-delay: 1.07s;
}
@keyframes twinkle-107 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(108) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1040px;
margin-top: 167px;
animation: twinkle-108 1s linear infinite;
animation-delay: 1.08s;
}
@keyframes twinkle-108 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(109) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 909px;
margin-top: 755px;
animation: twinkle-109 1s linear infinite;
animation-delay: 1.09s;
}
@keyframes twinkle-109 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(110) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 464px;
margin-top: 246px;
animation: twinkle-110 1s linear infinite;
animation-delay: 1.1s;
}
@keyframes twinkle-110 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(111) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1177px;
margin-top: 334px;
animation: twinkle-111 1s linear infinite;
animation-delay: 1.11s;
}
@keyframes twinkle-111 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(112) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 19px;
margin-top: 27px;
animation: twinkle-112 1s linear infinite;
animation-delay: 1.12s;
}
@keyframes twinkle-112 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(113) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1147px;
margin-top: 304px;
animation: twinkle-113 1s linear infinite;
animation-delay: 1.13s;
}
@keyframes twinkle-113 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(114) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1298px;
margin-top: 804px;
animation: twinkle-114 1s linear infinite;
animation-delay: 1.14s;
}
@keyframes twinkle-114 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(115) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 764px;
margin-top: 329px;
animation: twinkle-115 1s linear infinite;
animation-delay: 1.15s;
}
@keyframes twinkle-115 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(116) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1439px;
margin-top: 388px;
animation: twinkle-116 1s linear infinite;
animation-delay: 1.16s;
}
@keyframes twinkle-116 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(117) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 857px;
margin-top: 862px;
animation: twinkle-117 1s linear infinite;
animation-delay: 1.17s;
}
@keyframes twinkle-117 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(118) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1193px;
margin-top: 147px;
animation: twinkle-118 1s linear infinite;
animation-delay: 1.18s;
}
@keyframes twinkle-118 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(119) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 649px;
margin-top: 849px;
animation: twinkle-119 1s linear infinite;
animation-delay: 1.19s;
}
@keyframes twinkle-119 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(120) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 764px;
margin-top: 597px;
animation: twinkle-120 1s linear infinite;
animation-delay: 1.2s;
}
@keyframes twinkle-120 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(121) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1262px;
margin-top: 481px;
animation: twinkle-121 1s linear infinite;
animation-delay: 1.21s;
}
@keyframes twinkle-121 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(122) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 728px;
margin-top: 729px;
animation: twinkle-122 1s linear infinite;
animation-delay: 1.22s;
}
@keyframes twinkle-122 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(123) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1200px;
margin-top: 782px;
animation: twinkle-123 1s linear infinite;
animation-delay: 1.23s;
}
@keyframes twinkle-123 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(124) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 58px;
margin-top: 136px;
animation: twinkle-124 1s linear infinite;
animation-delay: 1.24s;
}
@keyframes twinkle-124 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(125) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1108px;
margin-top: 587px;
animation: twinkle-125 1s linear infinite;
animation-delay: 1.25s;
}
@keyframes twinkle-125 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(126) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 382px;
margin-top: 263px;
animation: twinkle-126 1s linear infinite;
animation-delay: 1.26s;
}
@keyframes twinkle-126 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(127) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1386px;
margin-top: 748px;
animation: twinkle-127 1s linear infinite;
animation-delay: 1.27s;
}
@keyframes twinkle-127 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(128) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1241px;
margin-top: 350px;
animation: twinkle-128 1s linear infinite;
animation-delay: 1.28s;
}
@keyframes twinkle-128 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(129) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1367px;
margin-top: 51px;
animation: twinkle-129 1s linear infinite;
animation-delay: 1.29s;
}
@keyframes twinkle-129 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(130) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 921px;
margin-top: 124px;
animation: twinkle-130 1s linear infinite;
animation-delay: 1.3s;
}
@keyframes twinkle-130 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(131) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 944px;
margin-top: 824px;
animation: twinkle-131 1s linear infinite;
animation-delay: 1.31s;
}
@keyframes twinkle-131 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(132) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 23px;
margin-top: 420px;
animation: twinkle-132 1s linear infinite;
animation-delay: 1.32s;
}
@keyframes twinkle-132 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(133) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 134px;
margin-top: 680px;
animation: twinkle-133 1s linear infinite;
animation-delay: 1.33s;
}
@keyframes twinkle-133 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(134) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 992px;
margin-top: 833px;
animation: twinkle-134 1s linear infinite;
animation-delay: 1.34s;
}
@keyframes twinkle-134 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(135) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 91px;
margin-top: 356px;
animation: twinkle-135 1s linear infinite;
animation-delay: 1.35s;
}
@keyframes twinkle-135 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(136) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1347px;
margin-top: 193px;
animation: twinkle-136 1s linear infinite;
animation-delay: 1.36s;
}
@keyframes twinkle-136 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(137) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 149px;
margin-top: 8px;
animation: twinkle-137 1s linear infinite;
animation-delay: 1.37s;
}
@keyframes twinkle-137 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(138) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1288px;
margin-top: 102px;
animation: twinkle-138 1s linear infinite;
animation-delay: 1.38s;
}
@keyframes twinkle-138 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(139) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 983px;
margin-top: 451px;
animation: twinkle-139 1s linear infinite;
animation-delay: 1.39s;
}
@keyframes twinkle-139 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(140) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1043px;
margin-top: 725px;
animation: twinkle-140 1s linear infinite;
animation-delay: 1.4s;
}
@keyframes twinkle-140 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(141) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 967px;
margin-top: 624px;
animation: twinkle-141 1s linear infinite;
animation-delay: 1.41s;
}
@keyframes twinkle-141 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(142) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1018px;
margin-top: 781px;
animation: twinkle-142 1s linear infinite;
animation-delay: 1.42s;
}
@keyframes twinkle-142 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(143) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 571px;
margin-top: 70px;
animation: twinkle-143 1s linear infinite;
animation-delay: 1.43s;
}
@keyframes twinkle-143 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(144) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 345px;
margin-top: 644px;
animation: twinkle-144 1s linear infinite;
animation-delay: 1.44s;
}
@keyframes twinkle-144 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(145) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 425px;
margin-top: 446px;
animation: twinkle-145 1s linear infinite;
animation-delay: 1.45s;
}
@keyframes twinkle-145 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(146) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1329px;
margin-top: 15px;
animation: twinkle-146 1s linear infinite;
animation-delay: 1.46s;
}
@keyframes twinkle-146 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(147) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 681px;
margin-top: 447px;
animation: twinkle-147 1s linear infinite;
animation-delay: 1.47s;
}
@keyframes twinkle-147 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(148) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 310px;
margin-top: 406px;
animation: twinkle-148 1s linear infinite;
animation-delay: 1.48s;
}
@keyframes twinkle-148 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(149) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 175px;
margin-top: 685px;
animation: twinkle-149 1s linear infinite;
animation-delay: 1.49s;
}
@keyframes twinkle-149 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(150) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1015px;
margin-top: 140px;
animation: twinkle-150 1s linear infinite;
animation-delay: 1.5s;
}
@keyframes twinkle-150 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(151) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1267px;
margin-top: 837px;
animation: twinkle-151 1s linear infinite;
animation-delay: 1.51s;
}
@keyframes twinkle-151 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(152) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1320px;
margin-top: 623px;
animation: twinkle-152 1s linear infinite;
animation-delay: 1.52s;
}
@keyframes twinkle-152 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(153) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 763px;
margin-top: 112px;
animation: twinkle-153 1s linear infinite;
animation-delay: 1.53s;
}
@keyframes twinkle-153 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(154) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 604px;
margin-top: 3px;
animation: twinkle-154 1s linear infinite;
animation-delay: 1.54s;
}
@keyframes twinkle-154 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(155) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 615px;
margin-top: 588px;
animation: twinkle-155 1s linear infinite;
animation-delay: 1.55s;
}
@keyframes twinkle-155 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(156) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 806px;
margin-top: 654px;
animation: twinkle-156 1s linear infinite;
animation-delay: 1.56s;
}
@keyframes twinkle-156 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(157) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 96px;
margin-top: 278px;
animation: twinkle-157 1s linear infinite;
animation-delay: 1.57s;
}
@keyframes twinkle-157 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(158) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 845px;
margin-top: 70px;
animation: twinkle-158 1s linear infinite;
animation-delay: 1.58s;
}
@keyframes twinkle-158 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(159) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 265px;
margin-top: 169px;
animation: twinkle-159 1s linear infinite;
animation-delay: 1.59s;
}
@keyframes twinkle-159 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(160) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 476px;
margin-top: 229px;
animation: twinkle-160 1s linear infinite;
animation-delay: 1.6s;
}
@keyframes twinkle-160 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(161) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1012px;
margin-top: 522px;
animation: twinkle-161 1s linear infinite;
animation-delay: 1.61s;
}
@keyframes twinkle-161 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(162) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 226px;
margin-top: 753px;
animation: twinkle-162 1s linear infinite;
animation-delay: 1.62s;
}
@keyframes twinkle-162 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(163) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 7px;
margin-top: 516px;
animation: twinkle-163 1s linear infinite;
animation-delay: 1.63s;
}
@keyframes twinkle-163 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(164) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 735px;
margin-top: 747px;
animation: twinkle-164 1s linear infinite;
animation-delay: 1.64s;
}
@keyframes twinkle-164 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(165) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 878px;
margin-top: 611px;
animation: twinkle-165 1s linear infinite;
animation-delay: 1.65s;
}
@keyframes twinkle-165 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(166) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1379px;
margin-top: 137px;
animation: twinkle-166 1s linear infinite;
animation-delay: 1.66s;
}
@keyframes twinkle-166 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(167) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1257px;
margin-top: 481px;
animation: twinkle-167 1s linear infinite;
animation-delay: 1.67s;
}
@keyframes twinkle-167 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(168) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 770px;
margin-top: 301px;
animation: twinkle-168 1s linear infinite;
animation-delay: 1.68s;
}
@keyframes twinkle-168 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(169) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 56px;
margin-top: 846px;
animation: twinkle-169 1s linear infinite;
animation-delay: 1.69s;
}
@keyframes twinkle-169 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(170) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 517px;
margin-top: 547px;
animation: twinkle-170 1s linear infinite;
animation-delay: 1.7s;
}
@keyframes twinkle-170 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(171) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1230px;
margin-top: 800px;
animation: twinkle-171 1s linear infinite;
animation-delay: 1.71s;
}
@keyframes twinkle-171 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(172) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 229px;
margin-top: 225px;
animation: twinkle-172 1s linear infinite;
animation-delay: 1.72s;
}
@keyframes twinkle-172 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(173) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 639px;
margin-top: 42px;
animation: twinkle-173 1s linear infinite;
animation-delay: 1.73s;
}
@keyframes twinkle-173 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(174) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 877px;
margin-top: 475px;
animation: twinkle-174 1s linear infinite;
animation-delay: 1.74s;
}
@keyframes twinkle-174 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(175) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1184px;
margin-top: 29px;
animation: twinkle-175 1s linear infinite;
animation-delay: 1.75s;
}
@keyframes twinkle-175 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(176) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 482px;
margin-top: 304px;
animation: twinkle-176 1s linear infinite;
animation-delay: 1.76s;
}
@keyframes twinkle-176 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(177) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 662px;
margin-top: 269px;
animation: twinkle-177 1s linear infinite;
animation-delay: 1.77s;
}
@keyframes twinkle-177 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(178) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 583px;
margin-top: 264px;
animation: twinkle-178 1s linear infinite;
animation-delay: 1.78s;
}
@keyframes twinkle-178 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(179) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1123px;
margin-top: 688px;
animation: twinkle-179 1s linear infinite;
animation-delay: 1.79s;
}
@keyframes twinkle-179 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(180) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 213px;
margin-top: 388px;
animation: twinkle-180 1s linear infinite;
animation-delay: 1.8s;
}
@keyframes twinkle-180 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(181) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 55px;
margin-top: 256px;
animation: twinkle-181 1s linear infinite;
animation-delay: 1.81s;
}
@keyframes twinkle-181 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(182) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1012px;
margin-top: 869px;
animation: twinkle-182 1s linear infinite;
animation-delay: 1.82s;
}
@keyframes twinkle-182 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(183) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 979px;
margin-top: 236px;
animation: twinkle-183 1s linear infinite;
animation-delay: 1.83s;
}
@keyframes twinkle-183 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(184) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1001px;
margin-top: 557px;
animation: twinkle-184 1s linear infinite;
animation-delay: 1.84s;
}
@keyframes twinkle-184 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(185) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 286px;
margin-top: 767px;
animation: twinkle-185 1s linear infinite;
animation-delay: 1.85s;
}
@keyframes twinkle-185 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(186) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 487px;
margin-top: 438px;
animation: twinkle-186 1s linear infinite;
animation-delay: 1.86s;
}
@keyframes twinkle-186 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(187) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 845px;
margin-top: 223px;
animation: twinkle-187 1s linear infinite;
animation-delay: 1.87s;
}
@keyframes twinkle-187 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(188) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 163px;
margin-top: 708px;
animation: twinkle-188 1s linear infinite;
animation-delay: 1.88s;
}
@keyframes twinkle-188 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(189) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1452px;
margin-top: 515px;
animation: twinkle-189 1s linear infinite;
animation-delay: 1.89s;
}
@keyframes twinkle-189 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(190) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1271px;
margin-top: 547px;
animation: twinkle-190 1s linear infinite;
animation-delay: 1.9s;
}
@keyframes twinkle-190 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(191) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 631px;
margin-top: 280px;
animation: twinkle-191 1s linear infinite;
animation-delay: 1.91s;
}
@keyframes twinkle-191 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(192) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1069px;
margin-top: 379px;
animation: twinkle-192 1s linear infinite;
animation-delay: 1.92s;
}
@keyframes twinkle-192 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(193) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1392px;
margin-top: 222px;
animation: twinkle-193 1s linear infinite;
animation-delay: 1.93s;
}
@keyframes twinkle-193 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(194) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 368px;
margin-top: 157px;
animation: twinkle-194 1s linear infinite;
animation-delay: 1.94s;
}
@keyframes twinkle-194 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(195) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 411px;
margin-top: 700px;
animation: twinkle-195 1s linear infinite;
animation-delay: 1.95s;
}
@keyframes twinkle-195 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(196) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 556px;
margin-top: 355px;
animation: twinkle-196 1s linear infinite;
animation-delay: 1.96s;
}
@keyframes twinkle-196 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(197) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 79px;
margin-top: 454px;
animation: twinkle-197 1s linear infinite;
animation-delay: 1.97s;
}
@keyframes twinkle-197 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(198) {
width: 2px;
height: 2px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1054px;
margin-top: 800px;
animation: twinkle-198 1s linear infinite;
animation-delay: 1.98s;
}
@keyframes twinkle-198 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(199) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1311px;
margin-top: 867px;
animation: twinkle-199 1s linear infinite;
animation-delay: 1.99s;
}
@keyframes twinkle-199 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.star:nth-child(200) {
width: 1px;
height: 1px;
z-index: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: 1;
margin-left: 1130px;
margin-top: 777px;
animation: twinkle-200 1s linear infinite;
animation-delay: 2s;
}
@keyframes twinkle-200 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.h-con {
width: 100%;
height: 300px;
position: absolute;
margin-top: 450px;
z-index: 100;
margin-left: calc(50% - 350px);
}
.hill {
width: 700px;
height: 1000px;
z-index: 130;
border-radius: 30px;
transform: rotate(45deg);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.5);
margin-top: 100px;
position: absolute;
margin-left: -200px;
background: linear-gradient(to bottom right, #002142, #27435F);
}
.hill2 {
width: 800px;
height: 1000px;
background: #002142;
z-index: 130;
border-radius: 30px;
transform: rotate(45deg);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.5);
margin-top: 100px;
position: absolute;
margin-left: -100px;
background: linear-gradient(to top right, #002142, #27435F);
}
.hill3 {
width: 600px;
height: 1000px;
background: #002142;
z-index: 130;
border-radius: 30px;
transform: rotate(45deg);
box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.5);
margin-top: 100px;
position: absolute;
margin-left: 50px;
background: linear-gradient(to bottom right, #002142, #27435F);
}
wow scriptnya ada ribuan baris beliau memang hebat yah. .
jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya :D
Demikianlah
Cara Membuat Animasi Pemandangan Gunung Dengan CSS, keren bukan ? :D
kebetulan pada tutorial kali ini saya sudah membuat demonya langsung, buat anda yang penasaran silahkan klik tombol demo di bawah ini
Baiklah mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D
وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
