源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 7936|回复: 0

[CSS/Html] [实战]html+css实现漂亮的透明登录页面,HTML实现炫酷登录页面

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19323
发表于 2022-7-8 12:21:06 | 显示全部楼层 |阅读模式


今天带大家,用html+css实现一个漂亮的登录页面,代码中关键部分我都做了注释,具体实现过程请看下面的代码。

html+css实现漂亮的透明登录页面,HTML炫酷登录页面



代码不难理解,可以根据自己的情况变更样式:

html
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6.     <link rel="stylesheet" href="style.css">

  7.     <title>登录:微信公众号AlbertYang</title>
  8. </head>

  9. <body>
  10.     <section>
  11.         <!-- 背景颜色 -->
  12.         <div class="color"></div>
  13.         <div class="color"></div>
  14.         <div class="color"></div>
  15.         <div class="box">
  16.             <!-- 背景圆 -->
  17.             <div class="circle" style="--x:0"></div>
  18.             <div class="circle" style="--x:1"></div>
  19.             <div class="circle" style="--x:2"></div>
  20.             <div class="circle" style="--x:3"></div>
  21.             <div class="circle" style="--x:4"></div>
  22.             <!-- 登录框 -->
  23.             <div class="container">
  24.                 <div class="form">
  25.                     <h2>登录</h2>
  26.                     <form>
  27.                         <div class="inputBox">
  28.                             <input type="text" placeholder="姓名">

  29.                         </div>
  30.                         <div class="inputBox">
  31.                             <input type="password" placeholder="密码">

  32.                         </div>
  33.                         <div class="inputBox">
  34.                             <input type="submit" value="登录">

  35.                         </div>
  36.                         <p class="forget">忘记密码?<a href="#">
  37.                                 点击这里
  38.                             </a></p>
  39.                         <p class="forget">没有账户?<a href="#">
  40.                                 注册
  41.                             </a></p>
  42.                     </form>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </section>
  47. </body>

  48. </html>
复制代码

css
  1. /* 清除浏览器默认边距,
  2. 使边框和内边距的值包含在元素的width和height内 */

  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }

  8. /* 使用flex布局,让内容垂直和水平居中 */

  9. section {
  10.     /* 相对定位 */
  11.     position: relative;
  12.     overflow: hidden;
  13.     display: flex;
  14.     justify-content: center;
  15.     align-items: center;
  16.     min-height: 100vh;
  17.     /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
  18.     background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
  19. }

  20. /* 背景颜色 */

  21. section .color {
  22.     /* 绝对定位 */
  23.     position: absolute;
  24.     /* 使用filter(滤镜) 属性,给图像设置高斯模糊*/
  25.     filter: blur(200px);
  26. }

  27. /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

  28. section .color:nth-child(1) {
  29.     top: -350px;
  30.     width: 600px;
  31.     height: 600px;
  32.     background: #ff359b;
  33. }

  34. section .color:nth-child(2) {
  35.     bottom: -150px;
  36.     left: 100px;
  37.     width: 500px;
  38.     height: 500px;
  39.     background: #fffd87;
  40. }

  41. section .color:nth-child(3) {
  42.     bottom: 50px;
  43.     right: 100px;
  44.     width: 500px;
  45.     height: 500px;
  46.     background: #00d2ff;
  47. }

  48. .box {
  49.     position: relative;
  50. }

  51. /* 背景圆样式 */

  52. .box .circle {
  53.     position: absolute;
  54.     background: rgba(255, 255, 255, 0.1);
  55.     /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
  56.     backdrop-filter: blur(5px);
  57.     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  58.     border: 1px solid rgba(255, 255, 255, 0.5);
  59.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  60.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  61.     border-radius: 50%;
  62.     /* 使用filter(滤镜) 属性,改变颜色。
  63.     hue-rotate(deg)  给图像应用色相旋转
  64.     calc() 函数用于动态计算长度值
  65.     var() 函数调用自定义的CSS属性值x*/
  66.     filter: hue-rotate(calc(var(--x) * 70deg));
  67.     /* 调用动画animate,需要10s完成动画,
  68.     linear表示动画从头到尾的速度是相同的,
  69.     infinite指定动画应该循环播放无限次*/
  70.     animation: animate 10s linear infinite;
  71.     /* 动态计算动画延迟几秒播放 */
  72.     animation-delay: calc(var(--x) * -1s);
  73. }

  74. /* 背景圆动画 */

  75. @keyframes animate {
  76.     0%, 100%, {
  77.         transform: translateY(-50px);
  78.     }
  79.     50% {
  80.         transform: translateY(50px);
  81.     }
  82. }

  83. .box .circle:nth-child(1) {
  84.     top: -50px;
  85.     right: -60px;
  86.     width: 100px;
  87.     height: 100px;
  88. }

  89. .box .circle:nth-child(2) {
  90.     top: 150px;
  91.     left: -100px;
  92.     width: 120px;
  93.     height: 120px;
  94.     z-index: 2;
  95. }

  96. .box .circle:nth-child(3) {
  97.     bottom: 50px;
  98.     right: -60px;
  99.     width: 80px;
  100.     height: 80px;
  101.     z-index: 2;
  102. }

  103. .box .circle:nth-child(4) {
  104.     bottom: -80px;
  105.     left: 100px;
  106.     width: 60px;
  107.     height: 60px;
  108. }

  109. .box .circle:nth-child(5) {
  110.     top: -80px;
  111.     left: 140px;
  112.     width: 60px;
  113.     height: 60px;
  114. }

  115. /* 登录框样式 */

  116. .container {
  117.     position: relative;
  118.     width: 400px;
  119.     min-height: 400px;
  120.     background: rgba(255, 255, 255, 0.1);
  121.     display: flex;
  122.     justify-content: center;
  123.     align-items: center;
  124.     backdrop-filter: blur(5px);
  125.     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  126.     border: 1px solid rgba(255, 255, 255, 0.5);
  127.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  128.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  129. }

  130. .form {
  131.     position: relative;
  132.     width: 100%;
  133.     height: 100%;
  134.     padding: 50px;
  135. }

  136. /* 登录标题样式 */

  137. .form h2 {
  138.     position: relative;
  139.     color: #fff;
  140.     font-size: 24px;
  141.     font-weight: 600;
  142.     letter-spacing: 5px;
  143.     margin-bottom: 30px;
  144.     cursor: pointer;
  145. }

  146. /* 登录标题的下划线样式 */

  147. .form h2::before {
  148.     content: "";
  149.     position: absolute;
  150.     left: 0;
  151.     bottom: -10px;
  152.     width: 0px;
  153.     height: 3px;
  154.     background: #fff;
  155.     transition: 0.5s;
  156. }

  157. .form h2:hover:before {
  158.     width: 53px;
  159. }

  160. .form .inputBox {
  161.     width: 100%;
  162.     margin-top: 20px;
  163. }

  164. /* 输入框样式 */

  165. .form .inputBox input {
  166.     width: 100%;
  167.     padding: 10px 20px;
  168.     background: rgba(255, 255, 255, 0.2);
  169.     outline: none;
  170.     border: none;
  171.     border-radius: 30px;
  172.     border: 1px solid rgba(255, 255, 255, 0.5);
  173.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  174.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  175.     font-size: 16px;
  176.     letter-spacing: 1px;
  177.     color: #fff;
  178.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  179. }

  180. .form .inputBox input::placeholder {
  181.     color: #fff;
  182. }

  183. /* 登录按钮样式 */

  184. .form .inputBox input[type="submit"] {
  185.     background: #fff;
  186.     color: #666;
  187.     max-width: 100px;
  188.     margin-bottom: 20px;
  189.     font-weight: 600;
  190.     cursor: pointer;
  191. }

  192. .forget {
  193.     margin-top: 6px;
  194.     color: #fff;
  195.     letter-spacing: 1px;
  196. }

  197. .forget a {
  198.     color: #fff;
  199.     font-weight: 600;
  200.     text-decoration: none;
  201. }
复制代码


作者:AlbertYang,软件设计师,Java工程师,前端工程师
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-6-25 14:16 , Processed in 0.130641 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明