参考资源
bilibili
阿里图标
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2441200_03qjw9nywe4z.css"> <link rel="stylesheet" href="css/style.css"> <title>Document</title></head><body> <div class="form-wrapper"> <div class="header"> login </div> <div class="input-wrapper"> <div class="border-wrapper"> <input type="text" name="username" placeholder="username" class="border-item" autocomplete="off"> </div> <div class="border-wrapper"> <input type="password" name="password" placeholder="password" class="border-item" autocomplete="off"> </div> </div> <div class="action"> <div class="btn">login</div> </div> <div class="icon-wrapper"> <i class="iconfont icon-github"></i> <i class="iconfont icon-weibo"></i> <i class="iconfont icon-weixin"></i> </div> </div></body></html>* { padding: 0; margin: 0;}html { height: 100%;}body { height: 100%; font-family: 'JetBrains Mono Medium'; display: flex; align-items: center; justify-content: center; background-color: #0e92b3;}.form-wrapper { width: 300px; background-color: rgb(41, 45, 62); color: #fff; border-radius: 2px; padding: 50px;}.form-wrapper .header { text-align: center; font-size: 35px; text-transform: uppercase; line-height: 100px;}.form-wrapper .input-wrapper input { background-color: rgb(41, 45, 62); border: 0; width: 100%; text-align: center; font-size: 15px; color: #fff; outline: none;}.form-wrapper .input-wrapper input::placeholder { text-transform: uppercase;}.form-wrapper .input-wrapper .border-wrapper { background-image: linear-gradient(to right, #e8198b, #0eb4dd); width: 100%; height: 50px; margin-bottom: 20px; border-radius: 30px; display: flex; align-items: center; justify-content: center;}.form-wrapper .input-wrapper .border-wrapper .border-item { height: calc(100% - 4px); width: calc(100% - 4px); border-radius: 30px;}.form-wrapper .action { display: flex; justify-content: center;}.form-wrapper .action .btn { width: 60%; text-transform: uppercase; border: 2px solid #0392b3; text-align: center; line-height: 50px; border-radius: 30px; transition: 0.2s; cursor: pointer;}.form-wrapper .action .btn:hover { background-color: #0392b3;}.form-wrapper .icon-wrapper { text-align: center; width: 60%; margin: 0 auto; margin-top: 20px; border-top: 1px dashed rgb(146, 146, 146); padding: 20px;}.form-wrapper .icon-wrapper i { font-size: 20px; color: rgb(187, 187, 187); cursor: pointer; border: 1px solid #fff; padding: 5px; border-radius: 20px;}github源代码