Magic Due To Logic: 2020

Friday 25 December 2020

Custom Toggle Switch using CSS

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Custom Toggle Switch using CSS</title>
  </head>
  <body>
    <div class="box">
      <input type="checkbox" name="" id="">
      <div class="circle">

      </div>
    </div>
  </body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
  background: black;
}
.box{
  width: 120px;
  height: 60px;
  border: 4px solid #252525;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
input{
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance:none;
}
.circle{
  position: absolute;
  top:2px;
  left: 2px;
  width: 48%;
  height: 48px;
  background: rgb(48, 48, 48);
  border-radius: 50px;
  z-index: -1;
  transition: all .5s;
}
.circle::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  background: rgb(85, 85, 85);
  border-radius: 50px;
  transition: all 0.5s;
}
input:checked ~ .circle{
  transform: translateX(100%);
}
input:checked ~ .circle::before{
  background: #ffff00;
  box-shadow: 0 0 50px 3px #ffff00;
}

Download - Code

Tuesday 22 December 2020

Custom Cursor Using HTML CSS & JS

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Custom Cursor</title>
  </head>
  <body>
    <div class="cursor">

    </div>
    <script type="text/javascript">
      const cursor=document.querySelector(".cursor");
      document.addEventListener("mousemove",e=>{
        cursor.setAttribute("style","top:"+e.pageY +"px;left:"+e.pageX +"px;")
      });
      document.addEventListener("click",()=>{
        cursor.classList.add("new");
        setTimeout(()=>{
          cursor.classList.remove("new");
        },500)
      })
    </script>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  height: 100vh;
  background: black;
  cursor: none;
}
.cursor{
position: absolute;
width: 10px;
height: 10px;
border: 4px solid rgba(255, 255, 255,0.623);
border-radius: 50%;
}
.cursor::before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.301);
  border-radius: 50%;
  animation: animl 0.5s linear infinite;
}
@keyframes animl {
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(3);
  }
}
.new{
  animation: anim 0.5s forwards;
  border: 4px solid rgba(255, 0, 0, 0.692);
}
@keyframes anim {
  0%,100%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.5);
  }
}

Download - Code

Saturday 12 December 2020

Button With Hover Effect

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Button With Hover Effect</title>
  </head>
  <body>
    <div class="main">
      <button class="btn">CLICK ME</button>
    </div>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}
.btn{
  width: 200px;
  height: 60px;
  font-size: 1.0rem;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  cursor: pointer;
  border: none;
  position: relative;
  color: white;
  z-index: 0;
  border: 1px solid #892cdc;
  background: black;
  overflow: hidden;
}
.btn:hover::before{
  top: 0px;
  border-radius: 0;
}
.btn::before{
  content: '';
  position: absolute;
  top: 60px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #892cdc;
  border-radius: 50% 50% 0% 0;
  z-index: -1;
  transition: all 0.5s;
}

Download - Code

Sunday 6 December 2020

Rain Animation with Lighting Effect

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Rain Animation with Lighting Effect</title>
  </head>
  <body>
    <div class="rain">
      
    </div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  background: url(background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.rain{
  height: 100vh;
  background: url(rain.png);
  animation: rain .5s linear infinite;
}
.rain::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: lighting .3s linear infinite;
  opacity: 0;
}
@keyframes rain {
  0%{
    background-position: 0% 0%;
  }
  100%{
    background-position: 20% 100%;
  }
}
@keyframes lighting {
  0%{
    opacity: 0;
  }
  10%{
    opacity: 0;
  }
  11%{
    opacity: 1;
  }
  14%{
    opacity: 0;
  }
  20%{
    opacity: 0;
  }
  21%{
    opacity: 1;
  }
  24%{
    opacity: 0;
  }
  104%{
    opacity: 0;
  }
}

Download - Code

Download - Full Code

Saturday 21 November 2020

Pure CSS3 Background Pulse Animation Effect

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Pulse Effects</title>
  </head>
  <body>
    <section>
      <div class="bhPulse">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </section>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
}
section{
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  animation: bgColor 20s linear infinite;
}
.bhPulse{
  width: 100%;
  height: 100%;
}
.bhPulse span{
  position: absolute;
  width: 80px;
  height: 80px;
  background: #fff;
  animation: animate 10s linear infinite;
}
@keyframes animate {
  0%{
    transform: scale(0) translateY(0) rotate(0deg);
    opacity: 1;
  }
  100%{
    transform: scale(1) translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}
@keyframes bgColor {
    0%{
      background: #f44336;
    }
    25%{
      background: #03a9f4;
    }
    50%{
      background: #9c27b0;
    }
    75%{
      background: #f44336;
    }
    100%{
      background: #00ff0a;
    }
}

.bhPulse span:nth-child(1){
  top: 50%;
  left: 20%;
  animation: animate 10s linear infinite;
}
.bhPulse span:nth-child(3n+1){
background: transparent;
border: 5px solid #fff;
}
.bhPulse span:nth-child(2){
  top: 80%;
  left: 40%;
  animation: animate 12s linear infinite;
}
.bhPulse span:nth-child(3){
  top: 10%;
  left: 65%;
  animation: animate 15s linear infinite;
}
.bhPulse span:nth-child(4){
  top: 50%;
  left: 70%;
  animation: animate 6s linear infinite;
}
.bhPulse span:nth-child(5){
  top: 10%;
  left: 30%;
  animation: animate 9s linear infinite;
}
.bhPulse span:nth-child(6){
  top: 90%;
  left: 95%;
  animation: animate 8s linear infinite;
}
.bhPulse span:nth-child(7){
  top: 80%;
  left: 5%;
  animation: animate 5s linear infinite;
}
.bhPulse span:nth-child(8){
  top: 35%;
  left: 50%;
  animation: animate 14s linear infinite;
}
.bhPulse span:nth-child(9){
  top: 5%;
  left: 5%;
  animation: animate 11s linear infinite;
}
.bhPulse span:nth-child(10){
  top: 25%;
  left: 90%;
  animation: animate 10s linear infinite;
}

Download - Code

Download - Full Code

Friday 13 November 2020

Drop shadow be a Gradient - CSS Animated Gradient Shadow Effects

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Animated Gradient Shadow Effects</title>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  background: #000;
}
.shadow{
  position: relative;
  margin: 200px auto 0;
  width: 400px;
  height: 250px;
  background: linear-gradient(0deg,#000,#262626);
}
.shadow:before,
.shadow:after{
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #fb0094,#0000ff, #00ff00,#ffff00,
    #ff0000,#fb0094,#0000ff, #00ff00,#ffff00, #ff0000);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background-size: 400%;
  z-index: -1;
  animation: animate 20s linear infinite;
}

.shadow:after{
  filter: blur(20px);
}

@keyframes animate {

  0%{
    background-position: 0 0;
  }
  50%{
    background-position: 300% 0;
  }
  100%{
    background-position: 0 0;
  }
}

Download - Code

Monday 9 November 2020

Quick SVG Elastic Line Animation Effect

Download : Code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Quick SVG Elastic Line Animation Effect</title>
  </head>
  <body>
    <svg>
      <path></path>
    </svg>
    <svg>
      <path></path>
    </svg>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
svg{
  position: absolute;
  width: 400px;
  fill: none;
}
svg:nth-child(2){
  filter: blur(40px);
}
svg path{
  d: path("M0,25 C150,110 150,-60 300,25");
  stroke: #ff0092;
  stroke-width: 50;
  stroke-linecap: round;
  transform: translate(50px, 50%);
  animation: animate 2s ease-in-out infinite;
}
@keyframes animate {
  0%{
    stroke: #ff0092;
    d: path("M0,25 C150,110 150,-60 300,25");
  }
  50%{
    stroke: #00ff00;
    d: path("M0,25 C160,-50 140,110 300,25");
  }
}

Download - Code

Sunday 8 November 2020

Animated Eyes Follow Mouse Cursor

Download : Code

Index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Eyes Follow Mouse Cursor</title>
  </head>
  <body>
    <div class="face">
      <div class="eyes">
        <div class="eye"></div>
        <div class="eye"></div>
        </div>
      </div>
      <script>
        document.querySelector('body').addEventListener('mousemove',eyeball);
        function eyeball(){
          var eye = document.querySelectorAll('.eye');
          eye.forEach(function(eye){
            let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
            let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);

            let radian = Math.atan2(event.pageX - x, event.pageY - y);
            let rot = (radian * (180 / Math.PI)* - 1) + 0;
            eye.style.transform = "rotate("+rot+"deg)";
          })
        }
      </script>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
.face{
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #ffcd00;
  display: flex;
  justify-content: center;
  align-items: center;
}
.face::before{
  content: '';
  position: absolute;
  top: 180px;
  width: 150px;
  height: 70px;
  background: #b57700;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 70px;
  transition: 0.5s;
}
.face:hover::before{
  top: 210px;
  width: 150px;
  height: 20px;
  background: #b57700;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.eyes{
  position: relative;
  top: -40px;
  display: flex;
}
.eyes .eye{
  position: relative;
  width: 80px;
  height: 80px;
  display: block;
  background: #fff;
  margin: 0 15px;
  border-radius: 50%;
}
.eyes .eye::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translate(-50%,-50%);
  width: 40px;
  height: 40px;
  background: #333;
  border-radius: 50%;
}

Download - Code

Sunday 25 October 2020

3D Wavy Circle Loader Animation Effect

3D Wavy Circle Loader Animation Effect HTML CSS

Download : Code

Index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>3D Wavy Circle Loader Animation Effect</title>
  </head>
  <body>
    <div class="loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000;
}
.loader{
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(60deg);
}
.loader span{
  position: absolute;
  display: block;
  border: 5px solid #fff;
  box-shadow: 0 5px 0 #ccc;
              inset 0 5px 0 #ccc;
  box-sizing: border-box;
  border-radius: 50%;
  animation: animate 3s ease-in-out infinite;
}
@keyframes animate {
  0%,100%{
    transform: translateZ(-100px);
  }
  50%{
    transform: translateZ(100px);
  }
}
.loader span:nth-child(1){
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  animation-delay: 1.4s;
}
.loader span:nth-child(2){
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  animation-delay: 1.3s;
}
.loader span:nth-child(3){
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  animation-delay: 1.2s;
}
.loader span:nth-child(4){
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  animation-delay: 1.1s;
}
.loader span:nth-child(5){
  top: 40px;
  left: 40px;
  bottom: 40px;
  right: 40px;
  animation-delay: 1.0s;
}
.loader span:nth-child(6){
  top: 50px;
  left: 50px;
  bottom:50px;
  right: 50px;
  animation-delay: 0.9s;
}
.loader span:nth-child(7){
  top: 60px;
  left: 60px;
  bottom: 60px;
  right: 60px;
  animation-delay: 0.8s;
}
.loader span:nth-child(8){
  top: 70px;
  left: 70px;
  bottom: 70px;
  right: 70px;
  animation-delay: 0.7s;
}
.loader span:nth-child(9){
  top: 80px;
  left: 80px;
  bottom: 80px;
  right: 80px;
  animation-delay: 0.6s;
}
.loader span:nth-child(10){
  top: 90px;
  left: 90px;
  bottom: 90px;
  right: 90px;
  animation-delay: 0.5s;
}
.loader span:nth-child(11){
  top: 100px;
  left: 100px;
  bottom: 100px;
  right: 100px;
  animation-delay: 0.4s;
}
.loader span:nth-child(12){
  top: 110px;
  left: 110px;
  bottom: 110px;
  right: 110px;
  animation-delay: 0.3s;
}
.loader span:nth-child(13){
  top: 120px;
  left: 120px;
  bottom: 120px;
  right: 120px;
  animation-delay: 0.2s;
}
.loader span:nth-child(14){
  top: 130px;
  left: 130px;
  bottom: 130px;
  right: 130px;
  animation-delay: 0.1s;
}
.loader span:nth-child(15){
  top: 140px;
  left: 140px;
  bottom: 140px;
  right: 140px;
  animation-delay: 0s;
}

Download - Code

Neon Light Button Animation Effect on Hover | HTML CSS

Neon Light Button Animation Effect on Hover in HTML CSS

Download: Code

Index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Neon Light Button Hover Effect</title>
  </head>
  <body>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Neon button
      </a>
     <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
      </a>
      <a href="#">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         Neon button
       </a>
  </body>
</html>

style.css

*{
  margin: 0;
  padding: 0;
  font-family: consolas;
  box-sizing: border-box;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  background: #000;
}
a{
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  margin: 40px 0;
  color: #03e9f4;
  font-size: 24px;
  text-decoration: none;
  text-transform: uppercase;
  Overflow: hidden;
  transition: 0.5s;
  letter-spacing: 4px;
  -webkit-box-reflect: below 1px linear-gradient(transparent,#0005);
}
a:nth-child(1){
  filter: hue-rotate(290deg);
}
a:nth-child(3){
  filter: hue-rotate(110deg);
}
a:hover{
  background: #03e9f4;
  color: #000;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
a span{
  position: absolute;
  display: block;
}
a span:nth-child(1){
  top: 0;
  left: -100;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#03e9f4);
  animation: animate1 1s linear infinite;
}
@keyframes  animate1{
  0%{
      left: -100%;
  }
  50%,100%{
      left: 100%;
  }
}
a span:nth-child(2){
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,#03e9f4);
  animation: animate2 2s linear infinite;
  animation-delay: 0.25s;
}
@keyframes  animate2{
  0%{
      top: -100%;
  }
  50%,100%{
      top: 100%;
  }
}
a span:nth-child(3){
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg,transparent,#03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@keyframes  animate3{
  0%{
      right: -100%;
  }
  50%,100%{
      right: 100%;
  }
}
a span:nth-child(4){
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,#03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes  animate4{
  0%{
      bottom: -100%;
  }
  50%,100%{
      bottom: 100%;
  }
}

Download - Code

Monday 31 August 2020

Flower Rain Animation in HTML CSS

Flower Rain Animation in HTML CSS -

Download: Code

Index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Flower Animaion</title>
  </head>
  <body>
    <div class="canvas">

     <div class="flower" id="flower1">
        <div class="petal petal1 f1p"></div>
        <div class="petal petal2 f1p"></div>
        <div class="petal petal3 f1p"></div>
        <div class="petal petal4 f1p"></div>
        <div class="petal petal5 f1p"></div>
     </div>

     <div class="flower" id="flower2">
        <div class="petal petal1 f2p"></div>
        <div class="petal petal2 f2p"></div>
        <div class="petal petal3 f2p"></div>
        <div class="petal petal4 f2p"></div>
        <div class="petal petal5 f2p"></div>
     </div>
     
     <div class="flower" id="flower3">
        <div class="petal petal1 f3p"></div>
        <div class="petal petal2 f3p"></div>
        <div class="petal petal3 f3p"></div>
        <div class="petal petal4 f3p"></div>
        <div class="petal petal5 f3p"></div>
     </div>

     <div class="flower" id="flower4">
        <div class="petal petal1 f4p"></div>
        <div class="petal petal2 f4p"></div>
        <div class="petal petal3 f4p"></div>
        <div class="petal petal4 f4p"></div>
        <div class="petal petal5 f4p"></div>
     </div>

     <div class="flower" id="flower5">
        <div class="petal petal1 f5p"></div>
        <div class="petal petal2 f5p"></div>
        <div class="petal petal3 f5p"></div>
        <div class="petal petal4 f5p"></div>
        <div class="petal petal5 f5p"></div>
     </div>

     <div class="flower" id="flower6">
        <div class="petal petal1 f6p"></div>
        <div class="petal petal2 f6p"></div>
        <div class="petal petal3 f6p"></div>
        <div class="petal petal4 f6p"></div>
        <div class="petal petal5 f6p"></div>
     </div>
  </div>
  </body>
</html>

style.css

body {
    margin:0;
    padding:0;
    background-color:#702050;
}
.canvas{
    display:inline;
}
.flower{
    width:15px;
    height:15px;
    border-radius:50%;
    z-index:1;
    position:absolute;
    top:-20%;
}
.petal{
    width:15px;
    height:15px;
    border-radius:50%;
    z-index:-1;
}
.petal1{
    position:relative;
    left:-70%; top:20%;
}
.petal2{
    position:relative;
    top:-18%; left:-5%;
}
.petal3{
    position:relative;
    top:-170%; left:72%;
}
.petal4{
    position:relative;
    top:-363%; left:-30%;
}
.petal5{
    position:relative;
    top:-450%; left:53%;
}

#flower1{
    background-color:yellow;
    position:absolute;
    left:8%;
    animation-name:rain;
    animation-duration:7s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.f1p{
    background-color:pink;
}

#flower2{
    background-color:orange;
    position:absolute;
    left:25%;
    animation-name:rain;
    animation-duration:4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:1.5s;
}
.f2p{
    background-color:yellow;
}
#flower3{
    background-color:red;
    position:absolute;
    left:42%;
    animation-name:rain;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:0s;
}
.f3p{
    background-color:skyblue;
}
#flower4{
    background-color:cyan;
    position:absolute;
    left:59%;
    animation-name:rain;
    animation-duration:2.5s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:2.5s;
}
.f4p{
    background-color:blue;
}

#flower5{
    background-color:green;
    position:absolute;
    left:75%;
    animation-name:rain;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
    animation-delay:3s;
}
.f5p{
    background-color:lightgreen;
}

#flower6{
    background-color:magenta;
    position:absolute;
    left:90%;
    animation-name:rain;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in;
    animation-delay:4.5s;
}
.f6p{
    background-color:turquoise;
}
@keyframes rain{
    0%{transform:rotate(0deg);
       top:-10%;
    }
    100%{transform:rotate(720deg);
         top:100vh;
    }
}

Output -

Source Code - Click Here...

Pages

Friday 25 December 2020

Custom Toggle Switch using CSS

index.html

style.css

Tuesday 22 December 2020

Custom Cursor Using HTML CSS & JS

index.html

style.css

Saturday 12 December 2020

Button With Hover Effect

index.html

style.css

Sunday 6 December 2020

Rain Animation with Lighting Effect

index.html

style.css

Saturday 21 November 2020

Pure CSS3 Background Pulse Animation Effect

index.html

style.css

Friday 13 November 2020

Drop shadow be a Gradient - CSS Animated Gradient Shadow Effects

index.html

style.css

Monday 9 November 2020

Quick SVG Elastic Line Animation Effect

index.html

style.css

Sunday 8 November 2020

Animated Eyes Follow Mouse Cursor

Sunday 25 October 2020

3D Wavy Circle Loader Animation Effect HTML CSS

Neon Light Button Animation Effect on Hover in HTML CSS

Monday 31 August 2020

Donate