CSS Water Effect.Today in this blog, we gonna learn about CSS basic water effect tutorial for Beginners.
CSS Water Effect
Hi Friends!
Today in this blog, we gonna learn about CSS basic water effect tutorial for Beginners. it's made by using HTML and CSS. So, you can learn easily. in the previous blog we will learn about CSS Neon Effect For Beginners and this blog will help you more learn about basics. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css water effect</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<span>Water Effect</span>
<div class="water"></div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with an extension. HTML. This extension is more important for creating a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #262626FF;
height: 100vh;
width: 100%;
}
.water{
position: relative;
background-color: royalblue;
margin: 300px auto;
border-radius: 50%;
height: 180px;
width: 180px;
overflow: hidden;
}
.water::before{
content: '';
position: relative;
display: block;
height: 180px;
width: 180px;
bottom: -150px;
background-color: antiquewhite;
box-shadow: 1px 1px 10px deepskyblue,
0px 0px 20px deepskyblue,
0px 0px 40px deepskyblue;
border-radius: 35%;
animation: design 4s linear infinite;
}
span{
position: relative;
color: skyblue;
font-size: 60px;
font-family: sans-serif;
font-weight: bolder;
top: 250px;
left: 35%;
text-shadow: 1px 1px 10px deepskyblue,
0px 0px 20px deepskyblue,
0px 0px 40px deepskyblue;
}
@keyframes design{
0%{
transform: rotate(45deg);
bottom: 0;
}
25%{
transform: rotate(90deg);
bottom: 50px;
}
50%{
transform: rotate(180deg);
bottom: 80px;
}
75%{
transform: rotate(270deg);
bottom: 100px;
}
100%{
transform: rotate(360deg);
bottom: 130px;
}
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called. CSS. This will you help to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully for your knowledge and repeat the code for your practice and you will learn better. I hope this tutorial will help learn the water effect for beginners. I will give you Source Code and you can download it.
[Download Source Code ##download##]
Hi
ReplyDelete