进行基本的样式清除和设置

这里的对整个body进行了设置，并且清除了默认样式，设置了一些默认样式，将整个body设置为弹性盒并且居中显示，运用了minhight样式 设置 min-height: 100vh; 的元素的高度将至少为浏览器窗口的高度，对最外层的box样式进行了超出部分隐藏，用于后期宣传时候超出盒子部分的隐藏掉，从而显示出来线条流动的效果，同时也对form表单进行了进一步的设置，通过zindx涉及了垂直层叠的顺序显示，且通过弹性盒子的改变主轴方向为y轴

下面对表单里面的各个组件部分进行样式设置，以及聚焦样式

这里呢对表单的各个部件进行了样式的设置，添加了聚焦时候的动画效果，值得一提的是运用了letter-spacing: 0.1em;/* 制文本中字符之间的间距为0.1em 属性应用于

、 以及 元素*/ 同时对文本框进行了定位，设置了位置其中将input标签的背景颜色隐藏了起来是为了后面更好的通过html中i元素勾画出的那条线来撑起来形成文本框做准备，同时也设计了zindex优先级的问题，对login按钮添加了动画样式

.box form h2 {         color: #fff;         font-weight: 500;          text-align: center;/*加粗文字居中 */         letter-spacing: 0.1em;/* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/     }      .box form .inputBox {         /* 相对于form进行定位 */         position: relative;         width: 300px;         margin-top: 35px;     }      .box form .inputBox input {         /* 相对于.inputBox进行定位 */         position: relative;         width: 100%;         padding: 20px 10px 10px;         background: transparent; /*input文本框隐藏起来方便用li标签的那根线撑起来形成文本框仅仅只是展示效果,实际上任然是input文本框 */         outline: none;         border: none;         box-shadow: none; /*阴影设置*/         color: #23242a;         font-size: 1em;         letter-spacing: 0.05em;/* 制文本中字符之间的间距为0.1em 属性应用于 <p>、<h> 以及 <span> 元素*/          z-index: 10; /*优先级设置 */         transition: 0.3s;     }      .box form .inputBox span {         position: absolute;         left: 0;         padding: 20px 0px 10px;         pointer-events: none;         color: #8f8f8f;         font-size: 1em;         letter-spacing: 0.05em;         transition: 0.5s;/*动画过渡*/     }          .box form .inputBox input:valid~span,/*选择器将选择所有紧跟在有效输入字段后的 <span> 元素。*/     .box form .inputBox input:focus~span/*用于选中处于焦点状态的输入字段之后的所有 <span> 元素。*/          {         color: #fff;         font-size: 0.75em;         transform: translateY(-34px);  /*向上移动34个像素*/     }

    .box form .inputBox i {         position: absolute;  /*相对于inputBox定位,并且在最左和最下面 */         left: 0;         bottom: 0;         width: 100%;         height: 2px;         background: #fff;         border-radius: 5px;         overflow: hidden;         transition: 0.5s;         pointer-events: none;     }        .box form .inputBox input:valid~i,     .box form .inputBox input:focus~i {         height: 42px;     }

         /* 设置flex a链接的样式 */     .box form .links {         display: flex;         justify-content: space-between;/*容器内的 flex 项目在水平方向上均匀分布，         项目之间的间距相等，并且最左侧和最右侧的项目紧贴容器的边界。*/     }      .box form .links a {         margin: 10px 0;         font-size: 0.75em;         color: #8f8f8f;     }     /* 移动上去改变颜色 */     .box form .links a:hover,     .box form .links a:nth-child(2) {         color: #fff;     }      /* 按钮样式 */     .box form input[type='submit'] {         padding: 9px 25px;         background: #fff;         cursor: pointer;  /*设置鼠标样式*/         font-size: 0.9em;         border-radius: 5px;         font-weight: 600;         width: 80%;         margin-top: 10px;         margin-left: 30px;     }      /* 登录按钮点击时透明度为80% */     .box form input[type='submit']:active {         opacity: 0.8;     }

     /* 添加流光动画 */      .borderLine {         position: absolute;         top: 0;         inset: 0;     }     @keyframes animate {         0% {             transform: rotate(0deg);         }          100% {             transform: rotate(360deg);         }     }

    .box::before,     .box::after,     .borderLine::before,     .borderLine::after{         /* 对box和borderlin前后插入伪元素 为元素content必修有尽管它可以是空 */         content: '';         position: absolute;         top: -50%;         left: -50%;         width: 380px;         height: 420px;         /* 使用线性渐变作为伪元素的背景样式。渐变采用了透明到非透明的过渡，具体颜色值会根据动画来变化。 */         background: linear-gradient(0deg, transparent, transparent, #45f3ff, #45f3ff, #45f3ff);         z-index: 1;/*设置伪元素的层级为 1，使其位于正常文档流之上。位于其他大于一的效果之下从而辅助形成一条线的效果*/         transform-origin: bottom right;/*控制元素的旋转、缩放和倾斜等变换效果的起始位置 从右下开始从而形成逆时针效果bottom right*/         animation: animate 6s linear infinite;      }