Html Css网页开发之动态登录页面(默认Chrome）

>>效果展示图<<

一、需求分析与设计要求

        实现了一个动态背景图案的效果，包括一个白色的容器，内部有一个标题、一个输入框、一个按钮和一些文本。

        背景是一个渐变色的线性渐变，而在容器的周围，有一些随机的方形和圆形图案，它们会在页面上移动和旋转。这些图案是通过使用CSS动画和伪元素（.### a：hover）来实现的。

二、Css动画代码详解

1.设置内外边距

        首先，将所有元素的外边距（margin）和内边距（padding）都设置为0，以确保页面的元素不会受到默认的（浏览器）外边距和内边距的影响。

* {
    margin: 0;
    padding: 0;
}

2.利用flex布局设置盒子属性

        设置body元素的高度为100vh，使其占据整个视口的高度。

        使用flex布局，使其内容垂直和水平居中。设置了一个线性渐变的背景色，从左下角到右上角，颜色从#e3c5eb（浅粉）到#a9c1ed（浅蓝）。

        最后，将overflow属性设置为hidden，以防止页面出现滚动条。

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
    overflow: hidden;
}

3.定义新类确定页面的主要内容与属性设置（相对定位）

        定义一个名为.container的类，用于包含页面的主要内容。

        设置了相对定位，z-index为1，背景色为白色，圆角为15px，使用flex布局，垂直和水平居中，宽度为350px，高度为500px，添加了一个阴影效果。

.container {
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 350px;
    height: 500px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

4.定义新类设置标题以及字体大小等属性

        定义了一个名为.tit的类，用于设置标题的样式。

        设置了字体大小为26px，上下外边距为65px和70px，左右外边距为auto，使其水平居中。

.container .tit {
    font-size: 26px;
    margin: 65px auto 70px auto;
}

5.定义新类设计输入框与输入框文本的属性

        定义一个名为input的类，用于设置输入框的样式。

        设置了宽度为280px，高度为30px，文本缩进为8px，去掉了边框，只保留了底部的1px实线边框，去掉了轮廓线，上下外边距为12px，左右外边距为auto，使其水平居中。

.container input {
    width: 280px;
    height: 30px;
    text-indent: 8px;
    border: none;
    border-bottom: 1px solid #ddd;
    outline: none;
    margin: 12px auto;
}

6.定义新类设置按钮属性与渐变背景色，增加鼠标过渡效果

        定义一个名为button的类，用于设置按钮的样式。

        设置了宽度为280px，高度为40px，上外边距为35px，下外边距为40px，左右外边距为auto，使其水平居中。

        去掉边框，使用一个线性渐变的背景色，从右上角到左下角，颜色从#fac0e7（浅粉）到#aac2ee（浅蓝）。

        设置了字体颜色为白色，字体加粗，字母间距为8px，圆角为10px，鼠标指针为手型，添加了一个0.5s的过渡效果。

.container button {
    width: 280px;
    height: 40px;
    margin: 35px auto 40px auto;
    border: none;
    background: linear-gradient(-200deg, #fac0e7, #aac2ee);
    color: #fff;
    font-weight: bold;
    letter-spacing: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

7.伪代码样式定义鼠标悬停按钮上的样式与背景色

        定义了当鼠标悬停在按钮上时的样式。

        使用了一个线性渐变的背景色，从左下角到右上角，颜色从#aac2ee（浅蓝）到#fac0e7（浅粉）。

        将背景图像的位置设置为-280px，使其向左移动，以产生动画效果。

.container button:hover {
    background: linear-gradient(-200deg, #aac2ee, #fac0e7);
    background-position-x: -280px;
}

8.定义span类设置文本样式

        设置字体大小为14px。

.container span {
    font-size: 14px;
}

9.定义a类设置链接样式与字体颜色等属性

        定义一个a类，用于设置链接的样式。

        设置了字体颜色为plum，去掉了下划线。

.container a {
    color: plum;
    text-decoration: none;
}

10.定义li类使用UL li设置图案样式（绝对定位）

        定义一个名为li的类，用于设置图案的样式。

        设置了绝对定位，边框为1px实线白色，背景色为白色，宽度和高度都为30px，去掉了列表样式，透明度为0，使其不可见。   

ul li {
    position: absolute;
    border: 1px solid #fff;
    background-color: #fff;
    width: 30px;
    height: 30px;
    list-style: none;
    opacity: 0;
}

     11.定义square类设置方形、矩形图案样式与动画（相对定位）

        定义一个名为square的类，用于设置方形图案的样式。

        设置了相对定位，初始位置为40vh和60vw，即垂直方向上在视口的40%处，水平方向上在视口的60%处。

        使用一个名为square的动画，持续时间为10s，线性运动，无限循环。

.square li {
    top: 40vh;
    left: 60vw;
    animation: square 10s linear infinite;
}

12.定义第二个方形图案以及第三、四、五个...类似于（11）

        第二个方形图案设置了初始位置为80vh和10vw，即垂直方向上在视口的80%处，水平方向上在视口的10%处。

        使用了一个2s的延迟，使其比第一个图案晚2s开始动画。

.square li:nth-child(2) {
    top: 80vh;
    left: 10vw;
    animation-delay: 2s;
}

        第三个方形图案设置了初始位置为80vh和85vw，即垂直方向上在视口的80%处，水平方向上在视口的85%处。

        使用了一个4s的延迟，使其比第一个图案晚4s开始动画。

.square li:nth-child(3) {
    top: 80vh;
    left: 85vw;
    animation-delay: 4s;
}

        第四个方形图案设置了初始位置为10vh和70vw，即垂直方向上在视口的10%处，水平方向上在视口的70%处。

        使用了一个6s的延迟，使其比第一个图案晚6s开始动画。

.square li:nth-child(4) {
    top: 10vh;
    left: 70vw;
    animation-delay: 6s;
}

第五个方形图案设置了初始位置为10vh和10vw，即垂直方向上在视口的10%处，水平方向上在视口的10%处。

        使用了一个8s的延迟，使其比第一个图案晚8s开始动画。

.square li:nth-child(5) {
    top: 10vh;
    left: 10vw;
    animation-delay: 8s;
}

13.定义circle类设置圆形图案样式（1,2,3,4,5）以及动画图案<相对定位>

第一个圆形图案设置了初始位置为底部和15vw，即水平方向上在视口的15%处。

使用了一个名为circle的动画，持续时间为10s，线性运动，无限循环。

.circle li {
    bottom: 0;
    left: 15vw;
    animation: circle 10s linear infinite;
}

第二个圆形图案设置了初始位置为35vw，即水平方向上在视口的35%处。

使用了一个2s的延迟，使其比第一个图案晚2s开始动画。

.circle li:nth-child(2) {
    left: 35vw;
    animation-delay: 2s;
}

第三个圆形图案设置了初始位置为55vw，即水平方向上在视口的55%处。

使用了一个6s的延迟，使其比第一个图案晚6s开始动画。

.circle li:nth-child(3) {
    left: 55vw;
    animation-delay: 6s;
}

第四个圆形图案设置了初始位置为75vw，即水平方向上在视口的75%处。

使用了一个4s的延迟，使其比第一个图案晚4s开始动画。

.circle li:nth-child(4) {
    left: 75vw;
    animation-delay: 4s;
}

第五个圆形图案设置了初始位置为90vw，即水平方向上在视口的90%处。

使用了一个8s的延迟，使其比第一个图案晚8s开始动画。

.circle li:nth-child(5) {
    left: 90vw;
    animation-delay: 8s;
}

14.定义Square动画模式：控制方形图案运动

        定义square的动画用于控制方形图案的运动。

        在0%时，将图案的缩放比例设置为0，旋转角度为0度，透明度为1。

        在100%时，将图案的缩放比例设置为5，旋转角度为1000度，透明度为0。

@keyframes square {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
    }
}

15.定义Circle动画模式：控制圆形图案运动

        定义了一个名为circle的动画，用于控制圆形图案的运动。

        在0%时，将图案的缩放比例设置为0，旋转角度为0度，透明度为1，底部位置为0，边框半径为0。

        在100%时，将图案的缩放比例设置为5，旋转角度为1000度，透明度为0，底部位置90vh，边框半径为50%。

@keyframes circle {
    0% {
        transform: scale(0) rotateY(0deg);
        opacity: 1;
        bottom: 0;
        border-radius: 0;
    }
    100% {
        transform: scale(5) rotateY(1000deg);
        opacity: 0;
        bottom: 90vh;
        border-radius: 50%;
    }
}

三、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" href="./38-动态背景登录组件.css">
</head>

<body>
    <div class="container">
        <div class="tit">登录</div>
        <input type="text" placeholder="账号">
        <input type="password" placeholder="密码">
        <button>登录</button>
        <span>没有账号？<a href="#">去注册</a></span>
    </div>
    <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>