Buterflyyy

✨ TANYA SISOOK

<html>
<head>
	<title>Buterflyy</title>
  <style>
    body{
		height:100%;
      background-color:black;
      margin:0%;
      background-image:url('https://sv1.picz.in.th/images/2021/08/21/2L14i0.png');
      position:relative;
      overflow:hidden;
      background-size:cover;
      background-position:center;
    }
    
    .butterfly{
		position: absolute;
      top: 20%;
      left: 20%;
     	transform: translate(-50%, -50%);
     	width: 150px;
     	height:150px;
     	border:0px solid rgba(255, 255, 255, .1);
     	border-radius:50%;
     	pointer-events:none;
     	box-sizing:border-box;
     	transition:0.1s;
      background-image:url('https://sv1.picz.in.th/images/2021/08/26/CdAGh0.gif');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
 
    .aura{
		height:80%;
      width:50%;
      margin-left:40px;
		margin-top:130px;
      border-radius:50%;
      opacity:60%;
    }
    
    #container {
      height: 100%;
      justify-content: center;
      overflow: hidden;
      position: relative;
      
    }
    
    .circle {
      border-radius: 100%;
      background:hsl( calc(180 + var(--sec) * 30) ,calc(40% + var(--sec) * 20%), 50% );
      width: 1000px;
      height: 1000px;
      position: absolute;
      opacity: 0;
      animation: animate 4s infinite cubic-bezier(.36, .11, .89, .32);
      margin-left:270px;
      margin-top:-50px;

}
    
      #spotLight {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 60%;
      transform: translate(-10%, 50%);
      transform-origin: 50% 0% 0;
      filter: blur(10px);
      opacity:80%;
      }
    
    @keyframes animate{
  		from {
    		transform: scale(.2, .2);
    		opacity: .5;
  }
  		to {
    		transform: scale(1.5, 1.5);
    		opacity: 0;
  }

}
</style>
</head>
<body>
  
    <section style="--sec:0">
  	<div class="circle" style="animation-delay: 0s"></div>
    </section>
    <section style="--sec:1">
	<div class="circle" style="animation-delay: 1s"></div>
    </section>
    <section style="--sec:2">
	<div class="circle" style="animation-delay: 2s"></div>
    </section>
    <section style="--sec:3">
	<div class="circle" style="animation-delay: 3s"></div>
    </section>