Create a 'Catch Me If You Can' Animation using HTML & CSS | Step-by-Step Tutorial

The ‘Catch Me If You Can’ animation is a fun and interactive way to add some personality to your website. This animation involves an element moving around the screen, evading the user’s cursor. In this tutorial, we will show you how to create a ‘Catch Me If You Can’ animation using HTML and CSS.

Our step-by-step guide will take you through the process of creating the animation’s visual effects and how to customize it to fit your website’s design. We will cover how to use CSS keyframes and JavaScript to make the animation interactive.

By following this tutorial, you will be able to create a unique and engaging ‘Catch Me If You Can’ animation that will add some fun and interactivity to your website.

HTML CODE

        
        Catch me if you can
    


        
                
                
                
                
                
        




  .links{
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
  .links a{
    margin-left: 10px;
    color: #000;
    letter-spacing: 1px;
    font-size: 18px;
    text-decoration: none;
  }
  .links a:hover{
    color: #939393;
    text-decoration: underline;
  }

CSS CODE:

.cage{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24em;
  height: 24em;
  background: #ccc;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5) 50%,
                                        rgba(0, 255, 0, 0.5) 50%),
              linear-gradient(to bottom, rgba(0, 0, 255, 0.5) 50%,
                                        rgba(255, 255, 0, 0.5) 50%);  
}
.box{
  position: relative;
  width: 12em;
  height: 12em;
  float: left;
  background: transparent;
}
.dot{
  z-index: -1;
  position: absolute;
  top: 5.5em;
  left: 5.5em;
  border-radius: 50%;
  background: #fff;
  width: 1em;
  height: 1em;
  transition:  0.155s all ease-in;
  will-change: box-shadow;
  will-change: transform;
}
.dot:after{
  position: absolute;
  content: "";
  border-radius: inherit;
  background: inherit;
  width: inherit;
  height: inherit;
  box-shadow: 0 0 0 0.25em #fff;
  will-change: animation;
  will-change: transform;
  will-change: opacity;
}
.box--topleft:hover ~ .dot{
  transform:  translate(12em, 0);
  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.5);
}
.box--topleft:hover ~ .dot:after{
  animation: superdot1 0.155s 1; 
}
.box--topright:hover ~ .dot{
  transform:  translate(0, 12em);
  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.5);
}
.box--topright:hover ~ .dot:after{
  animation: superdot1 0.155s 1; 
}
.box--bottomleft:hover ~ .dot{
  transform:  translate(12em , 12em);
  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.5);
}
.box--bottomleft:hover ~ .dot:after{
  animation: superdot1 0.155s 1; 
}
.box--bottomright:hover ~ .dot{
  transform:  translate(0, 0);
  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.5);
}
.box--bottomright:hover ~ .dot:after{
  animation: superdot1 0.155s 1; 
}
@keyframes superdot1{
  0%, 100%{
    transform: scale(1);
    opacity: 1;
  }
  50%{
    transform: scale(3);
    opacity: 0.4;
  }
}

Conclusion:

In conclusion, creating a ‘Catch Me If You Can’ animation using HTML and CSS is a fun and creative way to add some personality and interactivity to your website. By using keywords and headings that are relevant to the topic, this content is optimized for search engines and will attract visitors interested in learning how to create this engaging animation. Follow this easy-to-follow tutorial to add some fun to your website with a ‘Catch Me If You Can’ animation.

Download complete code from GITHub CATCH ME IF YOU CAN Animation IN PURE CSS

To Watch More Video as Like these

Just Subscribe My Youtube Channel DarkCoders

and Hit The Bell Icon