CSS Animation Cup
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
}
}
Advertisements
