You are currently viewing How to Create a Rectangle Animated Snake with CSS and HTML Code
animated snake movement image

How to Create a Rectangle Animated Snake with CSS and HTML Code

Rectangle Animated Snake: In this lesson we will create a web animation border movement. This lesson will be created with pure css and html. You could download the code from the bottom of this post.

This post follow the following order:

  • Create and add HTML code.
  • Create and add style-sheet code.

Lesson 10

This Video Explain “Rectangle Animated Snake”:

https://youtu.be/A1dDNUYFpUI

Create and add HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div class="square">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

Create and add style-sheet code:

body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to top ,#317fc1,#000000);
}
.square{

    position: relative;
    width: 100px;
    height: 100px;
}
.square span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}
.square span:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
    border-top: 10px solid #c55607;
    animation: animate 2s linear infinite;
}
.square span:nth-child(1){
    transform: rotate(0deg);
}
.square span:nth-child(2){
    transform: rotate(90deg);
}
.square span:nth-child(3){
    transform: rotate(180deg);
}
.square span:nth-child(4){
    transform: rotate(270deg);
}

@keyframes animate {
0%{
    left: -100%;}
    25%{
    left: 0;}
    50%,100%{
    left: 100%;}
}
.square span:nth-child(1):before{
    animation-delay: 0s;
}
.square span:nth-child(2):before{
    animation-delay: 0.5s;
}
.square span:nth-child(3):before{
    animation-delay: 1s;
}
.square span:nth-child(4):before{
    animation-delay: 1.5s;
}

Download the code over here:



Consequently You could follow us at :

Website URL: https://www.safhatech.com/

YouTube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instagram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone: 967778283416

Leave a Reply