Animated Lantern 🏮 HTML CSS JS

By Posted on

Animated Lantern 🏮 HTML CSS JS #shorts #programming #short #shortvideo #coding #status

<!DOCTYPE html>
<html>
<head>
  <title>BihariGraphic.com</title>
  <link rel="stylesheet"  
  href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>

<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Chelsea+Market&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
html,
body {
    overflow: hidden;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
    background-color:#1a001a;
  /*  background-image: linear-gradiet(
        to top,#001a34 ,#384264);  */
  
}

main {
    transform: scale(0.05);
    padding-left: 340px;
    padding-top: 7500px;
    }

   .lantern__head{
  width:980px;
  height:100px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -310px;
  border-radius:50%;
  top:1008px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:9;
  }
   .lantern__head::before{
  width:1000px;
  height:400px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  content:' ';
  left:-15px;
  border-radius:250px 250px 10px 10px;
  top:85px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:9;
  }
   .lantern__head::after{
  width:1100px;
  height:100px;
  background-color:#462600;
background-image: linear-gradient(
        to bottom, #1a001a 70%, #e67300  0%);  
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  content:' ';
  left: -65px;
  border-radius:10px;
  clip-path:polygon(5% 0%,95% 0%,100% 100%,0% 100%);
  top:450px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 10px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:9;
  }

.lantern__head_p1{
  width:900px;
  height:380px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -275px;
  border-radius:0px;
  top:1558px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:9;
  }

.lantern__head_p1::before,.lantern__head_p1::after{
  width:1020px;
  height:90px; 
  background-image: linear-gradient(
        to top,#1a001a 60%,#e67300 0%);  
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  content:' ';
  left: -60px;
  border-radius:0px;
  top:400px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:9;
  }

.lantern__head_p1::after{background-image: linear-gradient(to bottom,#1a001a 99%,#e67300 0%);  clip-path:polygon(5% 0%,95% 0%,100% 100%,0% 100%);top:350px;left:-45px;width:990px;height:53px; }

.lantern__blub{
  width:1390px;
  height:2500px;
  background-color:burlywood;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -520px;
  opacity:0.8;
  border-radius:100%;
  top:1658px;  
  transform: rotate(0deg);
  box-shadow: inset 0 0 0 1050px   
     rgba(255,255,255,0.2), 22px 2px  
     500px white, 16px 1px 1px 1px ; 
  color:burlywood;
  z-index:8;
  }

.lantern__stand{
  width:800px;
  height:150px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -220px;
  border-radius:100%;
  top:3855px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:9;
  }

.lantern__stand::before,.lantern__stand::after{
     width:980px;
  height:250px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -90px;
  border-radius:0px;
  top:108px;  
  content:' ';
  transform: rotate(0deg);
  clip-path:polygon(10% 0%,90% 0%,100% 100%,0% 100%);   
  z-index:9;
}
.lantern__stand::after{top:350px;left:-550px;
width:1900px;height:600px; clip-path:polygon(1% 0%,100% 0%,100% 100%,0% 100%); border-radius:270px 270px 0px 0px;z-index:9;background-image: linear-gradient(
        to top,#1a001a 95%,#e67300 0%);  }


.lantern__handel{
  width:1750px;
  height:180px;
  background-color:crimson;
 background-image: linear-gradient(
        to bottom,#1a001a    80%,#e67300 0%);  
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -700px;
  border-radius:1500px 1500px 0px 0px;
  top:1220px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:8;
  }
.lantern__handel::before,.lantern__handel::after{
  width:180px;
  height:2850px;
  background-color:crimson;
  background-image: linear-gradient(
        to right ,#1a001a 85%,#e67300 0%);  
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  content:' ';
  left: -80px;
  border-radius:300px 1px 1px 550px ;
  top:110px;  
  transform: rotate(3deg);  
  color:#1a001a;
  z-index:8;
  }

.lantern__handel::after{left:1650px;  transform: rotate(-3deg);background-image: linear-gradient(
        to left,#1a001a 85%,#e67300 0%);border-radius:1px 320px 550px 1px; }

.lantern__handel-bottoml,.lantern__handel-bottomr{
  width:800px;
  height:180px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -850px;
  border-radius:1px 1px 500px 500px;
  top:4050px;  
  transform: rotate(10deg);
  color:#1a001a;
  z-index:8;
  }
.lantern__handel-bottomr{left:400px;transform: rotate(-10deg);}

.light__stand1,.light__stand2,.light__stand3{
  width:600px;
  height:100px;
  background-color:blue;
  background-image: linear-gradient(
        to top,#1a001a 70%,#e67300 0%);  
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -110px;
  border-radius:0px;
  top:3760px;  
  transform: rotate(0deg);
  clip-path:polygon(49% 0%,100% 0%,81% 100%,17% 100%,0% 0%);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:10;
  }

.light__stand2{top:3680px; width:400px;left:-20px;}
.light__stand3{top:3600px; width:200px;left:80px;}


.lantern__light{
  width:200px;
  height:500px;
  background-color:wheat;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: 80px;
  opacity:0.9;
  border-radius:100%;
  top:3150px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:wheat;
  z-index:9;
  }

.circle-1,.circle-2,.circle-3,.circle-4,.circle-5,.circle-6,.circle-7{
  width:110px;
  height:110px;
  background-color:#e67300;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -250px;
  opacity:0.7;
  border-radius:100%;
  top:1650px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#e67300;
  z-index:9;
  }
 .circle-2{left:-100px;}
 .circle-3{left:50px;}
 .circle-4{left:200px;}
 .circle-5{left:350px;}
 .circle-6{left:500px;}
 .circle-7{left:-230px;top:3040px; height:820px;width:820px;z-index:8; background-color:wheat;color:wheat;opacity:0.5;}
 
 
.circle-chain2,.circle-chain1,.circle-chain3,.circle-chain4,.circle-chain5,.circle-chain6,.circle-chain7,.circle-chain8{
  width:130px;
  height:260px;
  background-color: ;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: 65px;
  border:50px solid #1a001a;
  border-radius:100%;
  top:300px;  
  transform: rotate(0deg);
   box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
        inset -14px 0px 80px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:8;
  }

.circle-chain3{top:20px;}
.circle-chain4{top:-280px;}
.circle-chain5{top:-580px;}
.circle-chain6{top:-880px;}
.circle-chain7{top:-1200px;}
.circle-chain8{top:890px; width:200px; height:400px;
border:0px;left:80px;background-color:#1a001a;}
.circle-chain1{top:560px; width:350px;height:350px;left:-40px;}


.circle__back1,.circle__back2,.circle__back3,.circle__back4,.circle__back5,.circle__back6,.circle__back7{
width:2000px;
  height:2000px;
  background-color: #e67300;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -850px;
  opacity:0.4;
  border-radius:100%;
  top:2200px;     
  transform: rotate(0deg);
  z-index:6;
  }
.circle__back2{opacity:0.4;width:2500px;animation: shadow 0.5s infinite;

    -webkit-animation: shadow 5s infinite ; height:2500px; top:2000px;left:-1100px;z-index:5;}

.circle__back3{opacity:0.4;  width:3100px;animation: shadow 0.5s infinite;

    -webkit-animation: shadow 5s infinite ; height:3100px; top:1700px;left:-1400px;z-index:4;}

.circle__back4{opacity:0.3;  width:4500px;animation: shadow 0.5s infinite;
    -webkit-animation: shadow 5s infinite ; height:4500px; top:1000px;left:-2100px;z-index:3;}

.circle__back5{opacity:0.2;width:5500px;animation: shadow 0.5s infinite;
    -webkit-animation: shadow 5s infinite ; height:5500px; top:500px;left:-2600px;z-index:2;}

.circle__back6{opacity:0.1; width:6800px;animation: shadow 0.5s infinite;
    -webkit-animation: shadow 5s infinite ; height:6800px; top:-150px;left:-3250px;z-index:1;}

.circle__back7{ opacity:0.09;  width:7700px;animation: shadow 0.5s infinite;
    -webkit-animation: shadow 5s infinite ; height:7700px; top:-600px;left:-3680px;z-index:-1;}

.lantern-crossl,.lantern-crossr{
  width:50px;
  height:1700px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: 210px;
  border-radius:30%;
  top:2400px;  
  transform: rotate(50deg);
  z-index:10;
  }
.lantern-crossr{transform: rotate(-50deg); left:100px;}

.lantern-crossl::before,.lantern-crossr::before{
  width:40px;
  height:500px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  content:' ';
  left: 250px;
  border-radius:30%;
  top:1380px;  
  transform: rotate(75deg);
  z-index:10;
  }
.lantern-crossr::before{transform: rotate(-75deg); left:-230px;}

  .lantern-bottom{
  width:2090px;
  height:100px;
  background-color:#1a001a;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -860px;
  border-radius:10px;
  clip-path:polygon(5% 0%,95% 0%,100% 100%,0% 100%);
  top:4800px;  
  transform: rotate(0deg);
  box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -0px -30px 80px -05px rgba(0, 0, 0, 0.3),
        inset -14px 0px 0px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a;
  z-index:5;
  }

.lantern-shadow{
  width:2300px;
  height:3000px;
  background-color:pink;
  background-image: linear-gradient(
        to bottom,black,#1a001a);  
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -960px;
  opacity:0.2;
  border-radius:10px;
  clip-path:polygon(5% 0%,95% 0%,100% 100%,0% 100%);
  top:4890px;  
  transform: rotate(0deg);
  box-shadow: inset -5px 5px 10px,
        inset -7px 5px 5px -5px
            rgba(255, 255, 255, 0.4),
        inset -0px -30px 80px -05px rgba(0, 0, 0, 0.3),
        inset -14px 0px 0px -5px rgba(0, 0, 0, 0.3); 
  color:#1a001a; 
  z-index:5;
  }


   .container{
  background-color:;
  text-align:center;
  display:flex;
  align-items:center ;
  justify-content:center;
  text-transform: uppercase;
  text-decoration:none;
  position:absolute  ;
  margin: auto;
  left: -30px;
  top:200px;  
  transform: rotate(0deg);
  z-index:9;
 animation:shake 5s infinite;
}
@keyframes shake{
 50%{transform:rotate(10deg);}
 }     
  
 
@keyframes shadow {
 50% {
    transform: scaleX(1.10); } }

@-webkit-keyframes shadow {
  50% {
    -webkit-transform: scaleX(1.3);
     }}
 
  
 a {
    width: 355px;
    height: 50px;
    background-color:;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(0px);
    position: absolute;
    margin: auto;

    top: 590px;
    bottom: 20px;
    font-size: 15px;
    color: burlywood;
    z-index: 9;
    font-family: '', serif;
    font-family: 'Chelsea Market', cursive;
}

   .bird img{
     position:absolute ;
     top:3200px;
     left:-893px;
     z-index:9;
     height:1233px;
     transform: rotate(0deg);
      }


.planet {
    --bg: hsl(257,39%,27%);
    --light: hsl(348,88%,65%);
    --orbit: 950px;
    z-index:9;
    animation: planet-anim 6s forwards infinite;
    background-color:#1a001a;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    height: 30px;
    left: calc(50% - 15px);
    overflow: hidden;
    position: absolute;
    top: 2600px;
    transform-origin: center center;
    width: 30px;
}
.planet::before {
    animation: planet-light-anim 2.5s forwards linear infinite;
    background-color: #e67300;
    border-radius: 50%;
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -2px;
}

.planet:nth-child(1) {
    --orbit: 1000px;
    animation-delay: -.3s;
    transform: scale(6) translateY(-80px);
}
.planet:nth-child(2) {
    --bg: hsl(344,83%,63%);
    --light: hsl(19,98%,75%);
    --orbit: 1700px;
    animation-delay: -2s;
    animation-duration: 5.5s;
    transform: scale(8) translateY(-20px);
}
.planet:nth-child(3) {
    --bg: hsl(344,83%,63%);
    --light: hsl(19,98%,75%);
    --orbit: 1500px;
    animation-delay: -4s;
    animation-duration: 4.5s;
    transform: scale(11) translateY(100px);
}
.planet:nth-child(4) {
    --bg: hsl(322,41%,43%);
    --light: hsl(348,88%,65%);
    --orbit: 1020px;
    animation-delay: -3.7s;
    animation-duration: 4.2s;
    transform: scale(8) translateY(75px);
}
.planet:nth-child(5) {
    --bg: hsl(322,41%,43%);
    --light: hsl(348,88%,65%);
    --orbit: 1000px;
    animation-delay: -1.3s;
    animation-duration: 5.8s;
    transform: scale(6) translateY(40px);
}
.planet:nth-child(6) {
    --orbit: 1500px;
    animation-delay: .2s;
    animation-duration: 5.2s;
    z-index:15;
    transform: scale(15) translateY(-10px);
}
@keyframes planet-anim {
    0% {
        margin-left: calc(var(--orbit) * -1);
        z-index: 15;
    }
    50% {
        margin-left: var(--orbit);
        z-index: 15;
    }
    50.1% {
        margin-left: var(--orbit);
        z-index: 0;
    }
    100% {
        margin-left: calc(var(--orbit) * -1);
        z-index: 0;
    }
}
@keyframes planet-light-anim {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
</style>

<body>
<main>
<div class="container">
    <div class="lantern__head"></div> 
    <div class="lantern__head_p1"></div> 
    
    <div class="lantern__blub"></div>    
    
    <div class="lantern__stand"></div> 
    
    <div class="lantern__handel"></div> 
    <div class="lantern__handel-bottoml"></div> 
    <div class="lantern__handel-bottomr"></div> 
    
    <div class="light__stand1"></div> 
    <div class="light__stand2"></div> 
    <div class="light__stand3"></div> 
  
    <div class="lantern__light"></div>     

    <div class="circle-1"></div>     
    <div class="circle-2"></div>     
    <div class="circle-3"></div>     
    <div class="circle-4"></div>     
    <div class="circle-5"></div>     
    <div class="circle-6"></div>     
    <div class="circle-7"></div>   
       
    <div class="circle-chain1"></div>     
    <div class="circle-chain2"></div>     
    <div class="circle-chain3"></div>     
    <div class="circle-chain4"></div>     
    <div class="circle-chain5"></div>     
    <div class="circle-chain6"></div>     
    <div class="circle-chain7"></div>   
    <div class="circle-chain8"></div>   
             
   <div class="lantern-crossl"></div>
   <div class="lantern-crossr"></div>
   
   <div class="lantern-bottom"></div>
 
   <div class="lantern-shadow"></div>     
    <div class="planets">
            <div class="planet"></div>
            <div class="planet"></div>
            <div class="planet"></div>
            <div class="planet"></div>
            <div class="planet"></div>
            <div class="planet"></div>
        </div>
    </div>
    
   <div class="bird"><img  src="https://64.media.tumblr.com/76656c275a2ecc49cfe82675e954b138/tumblr_mho62cS6Aw1rjeb8co1_500.gif"  border="0"></div>

    <div class="circle__back1"></div>      
   <div class="circle__back2"></div>      
   <div class="circle__back3"></div>       
   <div class="circle__back4"></div>      
   <div class="circle__back5"></div>      
   <div class="circle__back6"></div>     
   <div class="circle__back7"></div>    
       </main>     
       
       
       <script>
        window.onload = function () {
                let chocolate = document.getElementById('Lantern')
           {
Swal.fire({
        title:'🏮 Copyright Šī¸ 🏮',
        text: 'Developer Ritesh',     
        imageWidth: 300,
        imageHeight: 310,
        background:' wheat'
      })
                }
            }
    </script>
</body>
</html>