Creating a Dynamic Water‑Ripple Login Page with HTML and CSS
This tutorial demonstrates how to build a visually appealing login interface using HTML and CSS, featuring a dynamic water‑ripple effect, animated elements, and custom form styling to provide users with a refreshing login experience.
This article presents a fun login interface built with HTML and CSS that incorporates a dynamic water‑ripple effect, giving users a cool visual experience when logging in.
Basic HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="water.css">
<link rel="stylesheet" href="form.css">
</head>
<body>
<div class="main">
<form>
<p>用户名<br />
<input type="text" class="textinput" placeholder="请输入用户名" />
</p>
<p>密码<br />
<input type="password" class="textinput" placeholder="请输入密码" />
</p>
<p>
<input id="remember" type="checkbox" /><label for="smtxt">记住密码</label>
</p>
<p>
<input type="submit" value="登录" />
</p>
<p class="txt">还没有账户？<a href="#">注册</a></p>
</form>
</div>
</body>
</html>The form contains fields for username and password, a "remember password" checkbox, a submit button, and a registration link, all styled later with CSS.
Form styling
form{
opacity: 0.8;
text-align: center;
padding: 0px 100px;
border-radius: 10px;
margin: 120px auto;
}
p {
-webkit-text-stroke: 1px #8e87c3;
}The p elements are given a hollow‑text effect using -webkit-text-stroke.
Input field styling
.textinput{
height: 40px;
font-size: 15px;
width: 100px;
padding: 0 35px;
border: none;
background: rgba(250, 249, 249, 0.532);
box-shadow: inset 4px 4px 10px rgba(160,162,158,0.814), 4px 4px 10px rgba(117,117,117,0.3), 15px 15px 30px rgba(72,70,70,0.193), inset -2px -2px 10px rgba(255,254,254,0.873);
border-radius: 50px;
-webkit-text-stroke: 0px;
color: saddlebrown;
outline-style: none;
}The inputs receive a rounded shape, subtle shadows, and a semi‑transparent background to mimic a water droplet.
Submit button styling and hover effect
input[type="submit"]{
width: 110px;
height: 40px;
text-align: center;
outline-style: none;
border-style: none;
border-radius: 50px;
background: rgb(31,209,218);
-webkit-text-stroke: 0px;
box-shadow: inset 4px 4px 10px rgba(160,162,158,0.814), 4px 4px 10px rgba(117,117,117,0.3), 15px 15px 30px rgba(72,70,70,0.193), inset -2px -2px 10px rgba(255,254,254,0.873);
}
input[type="submit"]:hover {
background-color: rgb(31,218,78);
}The button changes color on hover, providing a clear visual cue.
Link styling
a{
text-decoration: none;
color: rgba(236,20,20,0.433);
-webkit-text-stroke: 1px;
}
a:hover {
text-decoration: underline;
}Links are styled with a semi‑transparent red color and gain an underline on hover.
Global reset and body background
*{
margin: 0;
padding: 0;
}
body{
background: skyblue;
}All elements have their margin and padding cleared, and the page background is set to sky blue.
Main container styling
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
box-sizing: border-box;
border-radius: 50%;
background: transparent;
box-shadow: inset 15px 10px 40px rgba(158,158,158,0.303), 10px 10px 20px rgba(117,117,117,0.3), 15px 15px 30px rgba(72,70,70,0.193), inset -10px -10px 20px rgba(233,229,229,0.873);
animation: move 6s linear infinite;
}The container is centered using absolute positioning and transform, given a circular shape, transparent background, layered shadows, and a continuous animation.
Pseudo‑elements for moving droplets
.main::after{
position: absolute;
content: "";
width: 40px;
height: 40px;
background: rgba(254,254,254,0.667);
left: 80px;
top: 80px;
border-radius: 50%;
animation: move2 6s linear infinite;
filter: blur(1px);
}
.main::before{
position: absolute;
content: "";
width: 20px;
height: 20px;
background: rgba(255,255,255,0.5);
left: 130px;
top: 70px;
border-radius: 50%;
animation: move3 6s linear infinite;
filter: blur(1px);
}Two pseudo‑elements act as small, semi‑transparent circles that move around the main container.
Keyframe animations
@keyframes move{
25%{ border-radius: 52% 48% 59% 41% / 43% 49% 51% 57%; }
50%{ border-radius: 42% 58% 49% 51% / 52% 36% 64% 48%; }
75%{ border-radius: 52% 48% 49% 51% / 43% 49% 51% 57%; }
}
@keyframes move2{
25%{ left: 80px; top: 110px; }
50%{ left: 50px; top: 80px; }
75%{ left: 80px; top: 120px; }
}
@keyframes move3{
25%{ left: 100px; top: 90px; }
50%{ left: 110px; top: 75px; }
75%{ left: 130px; top: 100px; }
}The move animation morphs the container’s border‑radius, while move2 and move3 animate the positions of the two pseudo‑elements.
Conclusion
All the code is provided above; feel free to copy, modify the styles, or experiment with different visual effects.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.