漂亮的html登录页面
2024-04-23 06:11:42
找到两个非常漂亮的html登录页面
1,效果图片：
代码 代码片.
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>背景动态变化的登录界面</title>
</head><body><div class="container"><div class="tit">登录</div><input type="text" placeholder="账号"><input type="password" placeholder="密码"><button>登录</button><span>没有账号？<a href="#">去注册</a></span></div><div class="square"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><div class="circle"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>
</body>
<style>
*{/* 初始化 */margin: 0;padding: 0;
}
body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg,#e3c5eb,#a9c1ed);/* 溢出隐藏 */overflow: hidden;
}
.container{/* 相对定位 */position: relative;z-index: 1;background-color: #fff;border-radius: 15px;/* 弹性布局 垂直排列 */display: flex;flex-direction: column;align-items: center;width: 350px;height: 500px;/* 阴影 */box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.container .tit{font-size: 26px;margin: 65px auto 70px auto;
}
.container input{width: 280px;height: 30px;text-indent: 8px;border: none;border-bottom: 1px solid #ddd;outline: none;margin: 12px auto;
}
.container button{width: 280px;height: 40px;margin: 35px auto 40px auto;border: none;background: linear-gradient(-200deg,#fac0e7,#aac2ee);color: #fff;font-weight: bold;letter-spacing: 8px;border-radius: 10px;cursor: pointer;/* 动画过渡 */transition: 0.5s;
}
.container button:hover{background: linear-gradient(-200deg,#aac2ee,#fac0e7);background-position-x: -280px;
}
.container span{font-size: 14px;
}
.container a{color: plum;text-decoration: none;
}
ul li{position: absolute;border: 1px solid #fff;background-color: #fff;width: 30px;height: 30px;list-style: none;opacity: 0;
}
.square li{top: 40vh;left: 60vw;/* 执行动画：动画名 时长 线性的 无限次播放 */animation: square 10s linear infinite;
}
.square li:nth-child(2){top: 80vh;left: 10vw;/* 设置动画延迟时间 */animation-delay: 2s;
}
.square li:nth-child(3){top: 80vh;left: 85vw;/* 设置动画延迟时间 */animation-delay: 4s;
}
.square li:nth-child(4){top: 10vh;left: 70vw;/* 设置动画延迟时间 */animation-delay: 6s;
}
.square li:nth-child(5){top: 10vh;left: 10vw;/* 设置动画延迟时间 */animation-delay: 8s;
}
.circle li{bottom: 0;left: 15vw;/* 执行动画 */animation: circle 10s linear infinite;
}
.circle li:nth-child(2){left: 35vw;/* 设置动画延迟时间 */animation-delay: 2s;
}
.circle li:nth-child(3){left: 55vw;/* 设置动画延迟时间 */animation-delay: 6s;
}
.circle li:nth-child(4){left: 75vw;/* 设置动画延迟时间 */animation-delay: 4s;
}
.circle li:nth-child(5){left: 90vw;/* 设置动画延迟时间 */animation-delay: 8s;
}/* 定义动画 */
@keyframes square {0%{transform: scale(0) rotateY(0deg);opacity: 1;}100%{transform: scale(5) rotateY(1000deg);opacity: 0;}
}
@keyframes circle {0%{transform: scale(0) rotateY(0deg);opacity: 1;bottom: 0;border-radius: 0;}100%{transform: scale(5) rotateY(1000deg);opacity: 0;bottom: 90vh;border-radius: 50%;}
}
</style>
</html>
2，效果图
代码 代码片.
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>不偷看密码的超萌猫头鹰</title><script src="../js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$('#password').focus(function(){// 密码框获得焦点，追加样式.password$('#owl').addClass('password');}).blur(function(){// 密码框失去焦点，移除样式.password$('#owl').removeClass('password');})})</script>
</head><body><div class="login-box"><div class="owl" id="owl"><div class="hand"></div><div class="hand hand-r"></div><div class="arms"><div class="arm"></div><div class="arm arm-r"></div></div></div><div class="input-box"><input type="text" placeholder="账号"><input type="password" placeholder="密码" id="password"><button>登录</button></div></div>
</body>
<style>
*{/* 初始化 */margin: 0;padding: 0;
}
body{/* 100%窗口高度 */height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;/* 渐变背景 */background: linear-gradient(200deg,#72afd3,#96fbc4);
}
.login-box{/* 相对定位 */position: relative;width: 320px;
}
.input-box{/* 弹性布局 垂直排列 */display: flex;flex-direction: column;
}
.input-box input{height: 40px;border-radius: 3px;/* 缩进15像素 */text-indent: 15px;outline: none;border: none;margin-bottom: 15px;
}
.input-box input:focus{outline: 1px solid lightseagreen;
}
.input-box button{border: none;height: 45px;background-color: lightseagreen;color: #fff;border-radius: 3px;cursor: pointer;
}
/* 接下来是猫头鹰的样式 */
.owl{width: 211px;height: 108px;/* 背景图片 */background: url("../images/owl-login.png") no-repeat;/* 绝对定位 */position: absolute;top: -100px;/* 水平居中 */left: 50%;transform: translateX(-50%);
}
.owl .hand{width: 34px;height: 34px;border-radius: 40px;background-color: #472d20;/* 绝对定位 */position: absolute;left: 12px;bottom: -8px;/* 沿Y轴缩放0.6倍（压扁） */transform: scaleY(0.6);/* 动画过渡 */transition: 0.3s ease-out;
}
.owl .hand.hand-r{left: 170px;
}
.owl.password .hand{transform: translateX(42px) translateY(-15px) scale(0.7);
}
.owl.password .hand.hand-r{transform: translateX(-42px) translateY(-15px) scale(0.7);
}
.owl .arms{position: absolute;top: 58px;width: 100%;height: 41px;overflow: hidden;
}
.owl .arms .arm{width: 40px;height: 65px;position: absolute;left: 20px;top: 40px;background: url("../images/owl-login-arm.png") no-repeat;transform: rotate(-20deg);transition: 0.3s ease-out;
}
.owl .arms .arm.arm-r{transform: rotate(20deg) scaleX(-1);left: 158px;
}
.owl.password .arms .arm{transform: translateY(-40px) translateX(40px);
}
.owl.password .arms .arm.arm-r{transform: translateY(-40px) translateX(-40px) scaleX(-1);
}
</style>
</html>
希望对大家的学习有所帮助。本文仅供参考，若有问题请帮忙留言指出，欢迎交流学习。获取更多资源请关注微信公众号： 俊俊同学的笔记
漂亮的html登录页面相关推荐
- java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
- bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
- 手把手教你制作油管上30万播放的动态登录页面效果
毕设要做个登录页面,想着做个漂亮点的页面,就找到了youtube上的一个,自己敲代码也做出来了,效果展示 视频讲解链接: link. 油管视频地址 https://www.youtube.com/wa ...
- 网页制作 Html制作简单而漂亮的登录页面
网页制作 Html制作简单而漂亮的登录页面 先来看看样子. html源码: XML/HTML Code复制内容到剪贴板 > <htmllang="en"> < ...
- php制作登录页面的过程_一个用Html制作的漂亮登录页面
这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先来看看样子. html源码: Login Login 登录 css代码: CS ...
- react登录页面_「开源」React-Admin终极后台管理项目解决方案
前端chenghao大神的作品,页面非常完善漂亮,不折不扣的企业级作品.学习react的小伙伴不可错过的好东西. 功能模块 首页 完整布局 换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块 ...
- 漂亮大气注册登录页面模板
介绍: 漂亮大气注册登录页面模板,适合各种浏览器,注册页面包涵QQ.微博.微信等第三方登录按钮. 网盘下载地址: http://kekewl.org/eQGeASXzovB0 图片:
- 让form登录界面居中_徒手撸-登录页面(1)
在github上或是其他的后台管理模板上经常看到漂亮的登录页面,今天我们就基于css3及element撸一个"骚气"的登录页面.用到的知识点包括flex布局.绝对定位.相对定位及基 ...
- HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板 原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
最新文章
- Spring MVC + Hibernate JPA + Bootstrap 搭建的博客系统
- 【干货】为什么都跑去用HTTPS了？
- 如何处理SAP OData错误消息： Invalid parametertype used at function XXXX
- 软件工程—团队作业1
- alibaba 实体转json_com.alibaba.fastjson 转换List Map等对象
- 以正确的方式招募数据科学家！
- Android RootTrustManager 证书校验简单分析
- php李炎恢代码,李炎恢老师thinkphp5.1视频教程含课程讲义代码SQL文件php视频
- 如何运行element ui
- android 音量曲线,Android音量控制曲线
- php正则校验特殊字符,PHP正则表达式中的特殊字符
- Web导出Excel总结
- tan-python-day02
- spring-定时任务
- 2017 年节点——T 型成长，持续学习
- break 与 continue 的用法
- python3分钟快迅制造一张精美的地图海报
- python如何生成多个随机数的列表
- firefox阻止更新并阻止提示更新
- 360 css grid,CSS Grid 網格佈局教程