Skip to content
Trending Topics: javascript•javascript lessons•JavaScript mixed•html and css•css mixed

CSS Animation Cup

Leave a Comment

HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
    
    <div class="cup"></div>
    
</body>
</html>

CSS CODE:

body{
    margin: 0;
    padding: 0;
    background:#262626;
}
.cup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 150px;
    height: 180px;
    border: 6px solid #262626;
    border-top: 2px solid transparent;
    border-radius: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: url(water.png);
    background-size: cover;
    background-repeat: repeat-x;
    animation: ani 15s linear infinite;
    box-shadow: 0 0 0 6px #fff, 0 20px 35px rgba(0,0,0,1);
}
.cup:before{
    content: "";
    position: absolute;
    width: 50px;
    height: 80px;
    border: 6px solid #fff;
    right: -68px;
    top: 30px;
    border-top-right-radius: 35px;
    border-bottom-right-radius: 35px;
}
@keyframes ani{
    0%{
        background-position: 500px 200px 
    }
    25%{
        background-position: 1000px 100px 
    }
    50%{
        background-position: 1500px 50px 
    }
    75%{
        background-position: 2000px 0px 
    }
    100%{
        background-position: 2500px 150px 
    }
}

Published by Truecodes

Instagram: codeblogger website: truecodes.org

css animation, css mixed, html and css
, , , , ,

Leave a Reply

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

Gravatar
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 )

Cancel

Connecting to %s

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

%d bloggers like this: