先上效果
(实际是底部的波浪部分是动态的,图示静态的而已)
🌟 登录页面是用户旅程的起点,它的设计直接影响着用户对品牌的第一印象。一个具有创新性和视觉吸引力的登录页面可以激发用户的兴趣,提升用户体验。本文将探讨如何利用CSS技术为登录页面添加酷炫的波浪动画效果,这种动态效果不仅能够吸引用户的注意力,还能增强页面的现代感和创意性,从而提升整体的品牌形象。
完整代码
HTML:
<div class="header">
<div class="inner-header">
<div class="login-container">
<h2>登录</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
<p id="error-message" class="error-message"></p>
</div>
</div>
<!--Waves Container-->
<div>
<svg
class="waves"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shape-rendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g class="parallax">
<use
xlink:href="#gentle-wave"
x="48"
y="0"
fill="rgba(255,255,255,0.7"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="3"
fill="rgba(255,255,255,0.5)"
/>
<use
xlink:href="#gentle-wave"
x="48"
y="5"
fill="rgba(255,255,255,0.3)"
/>
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
<!--Waves end-->
</div>
CSS代码:
body {
margin: 0;
}
h1 {
font-family: "Lato", sans-serif;
font-weight: 300;
letter-spacing: 2px;
font-size: 48px;
}
p {
font-family: "Lato", sans-serif;
letter-spacing: 1px;
font-size: 14px;
color: #333333;
}
.header {
position: relative;
text-align: center;
background: linear-gradient(
60deg,
rgba(84, 58, 183, 1) 0%,
rgba(0, 172, 193, 1) 100%
);
color: white;
}
.logo {
width: 50px;
fill: white;
padding-right: 15px;
display: inline-block;
vertical-align: middle;
}
.inner-header {
height: 75vh;
width: 100%;
margin: 0;
padding: 120px 0 0;
box-sizing: border-box;
}
.flex {
/*Flexbox for containers*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.waves {
position: relative;
width: 100%;
height: 15vh;
margin-bottom: -7px; /*Fix for safari gap*/
min-height: 100px;
max-height: 150px;
}
.content {
position: relative;
height: 20vh;
text-align: center;
background-color: white;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height: 40px;
min-height: 40px;
}
.content {
height: 30vh;
}
h1 {
font-size: 24px;
}
}
.login-container {
padding: 20px;
border-radius: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px; margin: 0 auto 0;
text-align: center;
}
.login-container h2 {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #ed813e;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.error-message {
color: red;
margin-top: 10px;
}
🌟 综上,效果实现了, 后续有什么想要的欢迎大家留言,也可以加喔微信, 18634371151,欢迎~
🌟 往期精彩,可以关注博主看左侧专栏,一定有你需要的!!!
🌟 关注耀南.,探索更多精彩的动画效果!🚀