自助购买VIP收藏本站将本站放到桌面
开启辅助访问 购买锦尚中国空间免费安装程序 请联系QQ278869155
源码论坛公告：本站是一个交流学习建站资源的社区论坛，旨在交流学习源码脚本等资源技术，欢迎大家投稿发言！ 【点击此处将锦尚放在桌面】

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

 找回密码
 会员注册

QQ登录

只需一步，快速开始

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛»论坛 › 网站源码(交流学习,共同进步) › 站长教程 › [实战]html+css实现漂亮的透明登录页面，HTML实现炫酷登 ...
返回列表 发新帖
查看: 8385|回复: 0
打印 上一主题 下一主题

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

[复制链接]
欧阳锋

1175

主题

1564

帖子

9320

金币

超级版主

Rank: 8Rank: 8

积分
20328
跳转到指定楼层
1#
发表于 2022-7-8 12:21:06 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式


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

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



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

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

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

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

  10.     <title>登录:微信公众号AlbertYang</title>
  11. </head>

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

  34.                         </div>
  35.                         <div class="inputBox">
  36.                             <input type="password" placeholder="密码">

  38.                         </div>
  39.                         <div class="inputBox">
  40.                             <input type="submit" value="登录">

  42.                         </div>
  43.                         <p class="forget">忘记密码?<a href="#">
  44.                                 点击这里
  45.                             </a></p>
  46.                         <p class="forget">没有账户?<a href="#">
  47.                                 注册
  48.                             </a></p>
  49.                     </form>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.     </section>
  54. </body>

  56. </html>
复制代码

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

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

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

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

  24. /* 背景颜色 */

  26. section .color {
  27.     /* 绝对定位 */
  28.     position: absolute;
  29.     /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
  30.     filter: blur(200px);
  31. }

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

  35. section .color:nth-child(1) {
  36.     top: -350px;
  37.     width: 600px;
  38.     height: 600px;
  39.     background: #ff359b;
  40. }

  42. section .color:nth-child(2) {
  43.     bottom: -150px;
  44.     left: 100px;
  45.     width: 500px;
  46.     height: 500px;
  47.     background: #fffd87;
  48. }

  50. section .color:nth-child(3) {
  51.     bottom: 50px;
  52.     right: 100px;
  53.     width: 500px;
  54.     height: 500px;
  55.     background: #00d2ff;
  56. }

  58. .box {
  59.     position: relative;
  60. }

  62. /* 背景圆样式 */

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

  87. /* 背景圆动画 */

  89. @keyframes animate {
  90.     0%, 100%, {
  91.         transform: translateY(-50px);
  92.     }
  93.     50% {
  94.         transform: translateY(50px);
  95.     }
  96. }

  98. .box .circle:nth-child(1) {
  99.     top: -50px;
  100.     right: -60px;
  101.     width: 100px;
  102.     height: 100px;
  103. }

  105. .box .circle:nth-child(2) {
  106.     top: 150px;
  107.     left: -100px;
  108.     width: 120px;
  109.     height: 120px;
  110.     z-index: 2;
  111. }

  113. .box .circle:nth-child(3) {
  114.     bottom: 50px;
  115.     right: -60px;
  116.     width: 80px;
  117.     height: 80px;
  118.     z-index: 2;
  119. }

  121. .box .circle:nth-child(4) {
  122.     bottom: -80px;
  123.     left: 100px;
  124.     width: 60px;
  125.     height: 60px;
  126. }

  128. .box .circle:nth-child(5) {
  129.     top: -80px;
  130.     left: 140px;
  131.     width: 60px;
  132.     height: 60px;
  133. }

  135. /* 登录框样式 */

  137. .container {
  138.     position: relative;
  139.     width: 400px;
  140.     min-height: 400px;
  141.     background: rgba(255, 255, 255, 0.1);
  142.     display: flex;
  143.     justify-content: center;
  144.     align-items: center;
  145.     backdrop-filter: blur(5px);
  146.     box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  147.     border: 1px solid rgba(255, 255, 255, 0.5);
  148.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  149.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  150. }

  152. .form {
  153.     position: relative;
  154.     width: 100%;
  155.     height: 100%;
  156.     padding: 50px;
  157. }

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

  161. .form h2 {
  162.     position: relative;
  163.     color: #fff;
  164.     font-size: 24px;
  165.     font-weight: 600;
  166.     letter-spacing: 5px;
  167.     margin-bottom: 30px;
  168.     cursor: pointer;
  169. }

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

  173. .form h2::before {
  174.     content: "";
  175.     position: absolute;
  176.     left: 0;
  177.     bottom: -10px;
  178.     width: 0px;
  179.     height: 3px;
  180.     background: #fff;
  181.     transition: 0.5s;
  182. }

  184. .form h2:hover:before {
  185.     width: 53px;
  186. }

  188. .form .inputBox {
  189.     width: 100%;
  190.     margin-top: 20px;
  191. }

  193. /* 输入框样式 */

  195. .form .inputBox input {
  196.     width: 100%;
  197.     padding: 10px 20px;
  198.     background: rgba(255, 255, 255, 0.2);
  199.     outline: none;
  200.     border: none;
  201.     border-radius: 30px;
  202.     border: 1px solid rgba(255, 255, 255, 0.5);
  203.     border-right: 1px solid rgba(255, 255, 255, 0.2);
  204.     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  205.     font-size: 16px;
  206.     letter-spacing: 1px;
  207.     color: #fff;
  208.     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  209. }

  211. .form .inputBox input::placeholder {
  212.     color: #fff;
  213. }

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

  217. .form .inputBox input[type="submit"] {
  218.     background: #fff;
  219.     color: #666;
  220.     max-width: 100px;
  221.     margin-bottom: 20px;
  222.     font-weight: 600;
  223.     cursor: pointer;
  224. }

  226. .forget {
  227.     margin-top: 6px;
  228.     color: #fff;
  229.     letter-spacing: 1px;
  230. }

  232. .forget a {
  233.     color: #fff;
  234.     font-weight: 600;
  235.     text-decoration: none;
  236. }
复制代码


作者：AlbertYang，软件设计师，Java工程师，前端工程师
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

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

GMT+8, 2024-12-5 02:52 , Processed in 0.132498 second(s), 24 queries .

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

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