一对一直播源码，实现一个简单的登录界面

1.html

<br><!DOCTYPE html><br><html><br><head><br>    <meta charset="UTF-8"><br>    <title>登录界面</title><br>    <link rel="stylesheet" href="static/login.css"><br></head><br><body><br>  <div><br>      <div>登录</div><br>      <input type="text" placeholder="账号"><br>      <input type="password" placeholder="密码"><br>      <button>登录</button><br>      <span>没有账号？<a href="#">去注册</a> </span><br>  </div><br>  <div><br>      <ul><br>          <li></li><br>          <li></li><br>          <li></li><br>          <li></li><br>          <li></li><br>      </ul><br>  </div><br>  <div><br>      <ul><br>          <li></li><br>          <li></li><br>          <li></li><br>          <li></li><br>          <li></li><br>      </ul><br>  </div><br></body><br></html>

2.css

<br>*{<br>    /*初始化*/<br>    margin: 0;<br>    padding: 0;<br>}<br>body{<br>    height: 100vh;<br>    /*弹性布局居中*/<br>    display: flex;<br>    justify-content: center;<br>    align-items: center;<br>    /*渐变背景*/<br>    background: linear-gradient(200deg,#e3c5eb,#a9c1ed);<br>   /*溢出影藏*/<br>    overflow: hidden;<br>}<br>.container{<br>    /*相对定位*/<br>    position: relative;<br>    z-index: 1;<br>    <br>    border-radius: 15px;<br>    display: flex;<br>    /*垂直配列*/<br>    flex-direction: column;<br>    justify-content: center;<br>    align-items: center;<br>    width: 350px;<br>    height: 500px;<br>    /*阴影*/<br>    box-shadow: 0 5px 20px rgba(0,0,0,0.1);<br>}<br>.container .tit{<br>    font-size: 26px;<br>    margin: 65px auto 70px auto;<br>}<br>.container input{<br>    width: 280px;<br>    height: 30px;<br>    text-indent: 8px;<br>    border: none;<br>    border-bottom: 1px solid #ddd;<br>    outline: none;<br>    margin: 12px auto;<br>}<br>.container button{<br>    width: 280px;<br>    height: 40px;<br>    margin: 35px auto 40px auto;<br>    border: none;<br>    background: linear-gradient(-200deg,#fac0e7,#aac2ee);<br>    color: #fff;<br>    font-weight: bold;<br>    letter-spacing: 8px;<br>    border-radius: 10px;<br>    cursor: pointer;<br>    /*动画过渡*/<br>    transition: 0.5s;<br>}<br>.container button:hover{<br>    background: linear-gradient(-200deg,#aac2ee,#fac0e7);<br>    background-position-x: -280px;<br>}<br>.container span{<br>    font-size: 14px;<br>}<br>.container a{<br>    color: plum;<br>    text-decoration: none;<br>}<br>ul li{<br>    position: absolute;<br>    border: 1px solid #fff;<br>    background-color: #ffffff;<br>    width: 30px;<br>    height: 30px;<br>    list-style: none;<br>    opacity: 0;<br>}<br>.square li{<br>    top: 40vh;<br>    left: 60vw;<br>    animation: square 10s linear infinite;<br>}<br>.square li:nth-child(2){<br>    top: 80vh;<br>    left: 10vm;<br>    /*动画延时时间*/<br>    animation-delay: 2s;<br>}<br>.square li:nth-child(3){<br>    top: 80vh;<br>    left: 85vm;<br>    /*动画延时时间*/<br>    animation-delay: 4s;<br>}<br>.square li:nth-child(4){<br>    top: 10vh;<br>    left: 70vm;<br>    /*动画延时时间*/<br>    animation-delay: 6s;<br>}<br>.square li:nth-child(5){<br>    top: 10vh;<br>    left: 10vm;<br>    /*动画延时时间*/<br>    animation-delay: 8s;<br>}<br>.circle li{<br>    bottom: 0;<br>    left: 15vw;<br>    animation: circle 10s linear infinite;<br>}<br>.circle li:nth-child(2){<br>    left: 35vw;<br>    animation-delay: 2s;<br>}<br>.circle li:nth-child(3){<br>    left: 55vw;<br>    animation-delay: 4s;<br>}<br>.circle li:nth-child(4){<br>    left: 75vw;<br>    animation-delay: 6s;<br>}<br>.circle li:nth-child(5){<br>    left: 90vw;<br>    animation-delay: 8s;<br>}<br>@keyframes square {<br>    0%{<br>       transform: scale(0) rotate(0deg);<br>        opacity: 0;<br>    }<br>    100%{<br>        transform: scale(0) rotate(1000deg);<br>        opacity: 0;<br>    }<br>}<br>@keyframes circle{<br>    0%{<br>        transform: scale(0) rotate(0deg);<br>        opacity: 1;<br>        bottom: 0;<br>        border-radius: 0;<br>    }<br>    100%{<br>        transform: scale(0) rotate(1000deg);<br>        opacity: 0;<br>        bottom: 90vh;<br>        border-radius: 50%;<br>    }<br>}