Saturday, 21 November 2020

Pure CSS3 Background Pulse Animation Effect

 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

at No comments:
Labels: , ,

Friday, 13 November 2020

Drop shadow be a Gradient - CSS Animated Gradient Shadow Effects

 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
at No comments:
Labels: , ,

Monday, 9 November 2020

Quick SVG Elastic Line Animation Effect

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
at No comments:
Labels: , ,

Sunday, 8 November 2020

Animated Eyes Follow Mouse Cursor

 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
at No comments:
Labels: , ,
Subscribe to: Comments (Atom)

Donate