css water effect


we don't need any description here . for fastest you look code and try out yourself. have fun !

HTML :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="cup"></div>
</body>
</html>

 

CSS: 

body{
	margin: 0;
	padding: 0;
	background: #262626;
}

.cup{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-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-left-radius: 5px;
	background: url(https://khcode.net/photos/1/wave.png);
	background-repeat: repeat-x;
	animation: animate 10s 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 animate{
	0%{
		background-position: 0 100px;
	}
	10%{
		background-position: 0 100px;
	}
	40%{
		background-position: 1000px -70px;
	}
	80%{
		background-position: 2000px -80px;
	}
	100%{
		background-position: 2500px 100px;
	}
}

reference topic : https://www.youtube.com/watch?v=fKdsaWrrjNM

Share this Post:

Related Posts:

www.000webhost.com