Skip to content
Advertisements

CSS Animation – Snake


HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>menu</title>
    <link rel="stylesheet" type="text/css" href="animation1.css">
</head>
<body>

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

</body>
</html>

CSS CODE:

body{
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100vh;
    background: linear-gradient(45deg,#262626,black)
}
.square{
    position: absolute;
    top: 37%;
    left: 42%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 300px;
    animation: rotate 8s linear infinite;
    border: 30px dashed #ff8566;
    box-shadow: 0 0 0 30px #991f00,inset 0 0 0 30px #801a00
}
@keyframes rotate{
    0%
    {
        transform: rotate(360deg);
    }
    100%
    {
        transform: rotate(0deg);
    }
}
.square span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.square span:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border:none;
    border-top: 30px solid #fff;
    animation: ani 2s linear infinite;
}
@keyframes ani{
    0%
    {
        left: -100%;
    }
    25%
    {
        left: 0;
    }
    50%,100%
    {
        left: 100%;
    }
}
.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)
}
.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;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: