CSS动画（登录页面）

最新推荐文章于 2024-07-17 18:42:40 发布

写代码的大学生

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量628

点赞数 14

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139704419

版权

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6Pfop3IiakrZOtiaiaKniaxeH2Gs407DmkXPsMo8AFKdsYibYcpZiboc24Ulic2CicmyvHmnwCrib7MDe6Jvg/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1

2.完整代码

HTML

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title> </title>  
    <link rel="stylesheet" type="text/css" href="6_16.css">  
</head>  
<body>  
<section>  
    <!-- 背景颜色 -->  
    <div class="color"></div>  
    <div class="color"></div>  
    <div class="color"></div>  
    <div class="box">  
        <!-- 背景圆 -->  
        <div class="circle" style="--x:0"></div>  
        <div class="circle" style="--x:1"></div>  
        <div class="circle" style="--x:2"></div>  
        <div class="circle" style="--x:3"></div>  
        <div class="circle" style="--x:4"></div>  
        <!-- 登录框 -->  
        <div class="conMain">  
            <div class="form">  
                <h2>登录</h2>  
                <form>  
                    <div class="inputBox">  
                        <input type="text" placeholder="姓名">  
  
                    </div>  
                    <div class="inputBox">  
                        <input type="password" placeholder="密码">  
  
                    </div>  
                    <div class="inputBox">  
                        <input type="submit" value="登录">  
  
                    </div>  
                    <p class="forget">忘记密码?<a href="#">  
                        点击这里  
                    </a></p>  
                    <p class="forget">没有账户?<a href="#">  
                        注册  
                    </a></p>  
                </form>  
            </div>  
        </div>  
    </div>  
</section>  
</body>  
  
</html>

CSS

/* 清除浏览器默认边距，  
使边框和内边距的值包含在元素的width和height内 */  
* {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
/* 使用flex布局，让内容垂直和水平居中 */  
section {  
    /* 相对定位 */    position: relative;  
    overflow: hidden;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    min-height: 100vh;  
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);  
}  
  
/* 背景颜色 */  
section .color {  
    /* 绝对定位 */    position: absolute;  
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/  
    filter: blur(200px);  
}  
  
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */  
section .color:nth-child(1) {  
    top: -350px;  
    width: 600px;  
    height: 600px;  
    background: #ff359b;  
}  
  
section .color:nth-child(2) {  
    bottom: -150px;  
    left: 100px;  
    width: 500px;  
    height: 500px;  
    background: #fffd87;  
}  
  
section .color:nth-child(3) {  
    bottom: 50px;  
    right: 100px;  
    width: 500px;  
    height: 500px;  
    background: #00d2ff;  
}  
  
.box {  
    position: relative;  
}  
  
/* 背景圆样式 */  
.box .circle {  
    position: absolute;  
    background: rgba(255, 255, 255, 0.1);  
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */    backdrop-filter: blur(5px);  
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);  
    border: 1px solid rgba(255, 255, 255, 0.5);  
    border-right: 1px solid rgba(255, 255, 255, 0.2);  
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
    border-radius: 50%;  
    /* 使用filter(滤镜) 属性，改变颜色。  
    hue-rotate(deg) 给图像应用色相旋转  
    calc() 函数用于动态计算长度值  
    var() 函数调用自定义的CSS属性值x*/  
    filter: hue-rotate(calc(var(--x) * 70deg));  
    /* 调用动画animate，需要10s完成动画，  
    linear表示动画从头到尾的速度是相同的，  
    infinite指定动画应该循环播放无限次*/  
    animation: animate 10s linear infinite;  
    /* 动态计算动画延迟几秒播放 */    animation-delay: calc(var(--x) * -1s);  
}  
  
/* 背景圆动画 */  
@keyframes animate {  
    0%, 100%, {  
        transform: translateY(-50px);  
    }  
    50% {  
        transform: translateY(50px);  
    }  
}  
  
.box .circle:nth-child(1) {  
    top: -50px;  
    right: -60px;  
    width: 100px;  
    height: 100px;  
}  
  
.box .circle:nth-child(2) {  
    top: 150px;  
    left: -100px;  
    width: 120px;  
    height: 120px;  
    z-index: 2;  
}  
  
.box .circle:nth-child(3) {  
    bottom: 50px;  
    right: -60px;  
    width: 80px;  
    height: 80px;  
    z-index: 2;  
}  
  
.box .circle:nth-child(4) {  
    bottom: -80px;  
    left: 100px;  
    width: 60px;  
    height: 60px;  
}  
  
.box .circle:nth-child(5) {  
    top: -80px;  
    left: 140px;  
    width: 60px;  
    height: 60px;  
}  
  
/* 登录框样式 */  
.conMain {  
    position: relative;  
    width: 400px;  
    min-height: 400px;  
    background: rgba(255, 255, 255, 0.1);  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    backdrop-filter: blur(5px);  
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);  
    border: 1px solid rgba(255, 255, 255, 0.5);  
    border-right: 1px solid rgba(255, 255, 255, 0.2);  
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
}  
  
.form {  
    position: relative;  
    width: 100%;  
    height: 100%;  
    padding: 50px;  
}  
  
/* 登录标题样式 */  
.form h2 {  
    position: relative;  
    color: #fff;  
    font-size: 24px;  
    font-weight: 600;  
    letter-spacing: 5px;  
    margin-bottom: 30px;  
    cursor: pointer;  
}  
  
/* 登录标题的下划线样式 */  
.form h2::before {  
    content: "";  
    position: absolute;  
    left: 0;  
    bottom: -10px;  
    width: 0px;  
    height: 3px;  
    background: #fff;  
    transition: 0.5s;  
}  
  
.form h2:hover:before {  
    width: 53px;  
}  
  
.form .inputBox {  
    width: 100%;  
    margin-top: 20px;  
}  
  
/* 输入框样式 */  
.form .inputBox input {  
    width: 100%;  
    padding: 10px 20px;  
    background: rgba(255, 255, 255, 0.2);  
    outline: none;  
    border: none;  
    border-radius: 30px;  
    border: 1px solid rgba(255, 255, 255, 0.5);  
    border-right: 1px solid rgba(255, 255, 255, 0.2);  
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);  
    font-size: 16px;  
    letter-spacing: 1px;  
    color: #fff;  
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  
}  
  
.form .inputBox input::placeholder {  
    color: #fff;  
}  
  
/* 登录按钮样式 */  
.form .inputBox input[type="submit"] {  
    background: #fff;  
    color: #666;  
    max-width: 100px;  
    margin-bottom: 20px;  
    font-weight: 600;  
    cursor: pointer;  
}  
  
.forget {  
    margin-top: 6px;  
    color: #fff;  
    letter-spacing: 1px;  
}  
  
.forget a {  
    color: #fff;  
    font-weight: 600;  
    text-decoration: none;  
}