一款很漂亮的CSS3登录界面
来源:互联网 发布:mybaby软件怎么用 编辑:程序博客网 时间:2024/06/05 17:46
一款很漂亮的CSS3登录界面
-随着高级浏览器的出现,对css3的支持也很不错了,下面我展现自己用CSS3做的一款登陆界面。
-效果如图
-代码如下:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>一款很漂亮的CSS3登录界面</title> <style type="text/css"> * { box-sizing: border-box; } body { margin: 0; padding: 0; font: 16px/20px microsft yahei; } .wrap { width: 100%; height: 400px; padding: 40px 0; position: fixed; top: 50%; margin-top: -200px; opacity: 0.8; background: linear-gradient(to bottom right,#50a3a2,#53e3a6); background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6); } .container { width: 60%; margin: 0 auto; } .container h1 { text-align: center; color: #FFFFFF; font-weight: 500; } .container input { width: 320px; display: block; height: 36px; border: 0; outline: 0; padding: 6px 10px; line-height: 24px; margin: 32px auto; -webkit-transition: all 0s ease-in 0.1ms; -moz-transition: all 0s ease-in 0.1ms; transition: all 0s ease-in 0.1ms; } .container input[type="text"] , .container input[type="password"] { background-color: #FFFFFF; font-size: 16px; color: #50a3a2; } .container input[type='submit'] { font-size: 16px; letter-spacing: 2px; color: #666666; background-color: #FFFFFF; } .container input:focus { width: 400px; } .container input[type='submit']:hover { cursor: pointer; width: 400px; } .wrap ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; } .wrap ul li { list-style-type: none; display: block; position: absolute; bottom: -120px; width: 15px; height: 15px; z-index: -8; background-color:rgba(255, 255, 255, 0.15); animotion: square 25s infinite; -webkit-animation: square 25s infinite; } .wrap ul li:nth-child(1) { left: 0; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(2) { width: 40px; height: 40px; left: 10%; animation-duration: 15s; -moz-animation-duration: 15s; -o-animation-duration: 15s; -webkit-animation-duration: 15s; } .wrap ul li:nth-child(3) { left: 20%; width: 25px; height: 25px; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(4) { width: 50px; height: 50px; left: 30%; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; animation-duration: 12s; -moz-animation-duration: 12s; -o-animation-duration: 12s; -webkit-animation-duration: 12s; } .wrap ul li:nth-child(5) { width: 60px; height: 60px; left: 40%; animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -webkit-animation-duration: 10s; } .wrap ul li:nth-child(6) { width: 75px; height: 75px; left: 50%; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; -o-animation-delay: 7s; animation-delay: 7s; } .wrap ul li:nth-child(7) { left: 60%; animation-duration: 8s; -moz-animation-duration: 8s; -o-animation-duration: 8s; -webkit-animation-duration: 8s; } .wrap ul li:nth-child(8) { width: 90px; height: 90px; left: 70%; -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; } .wrap ul li:nth-child(9) { width: 100px; height: 100px; left: 80%; animation-duration: 20s; -moz-animation-duration: 20s; -o-animation-duration: 20s; -webkit-animation-duration: 20s; } .wrap ul li:nth-child(10) { width: 120px; height: 120px; left: 90%; -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; animation-duration: 30s; -moz-animation-duration: 30s; -o-animation-duration: 30s; -webkit-animation-duration: 30s; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; transform: rotate(600deg); -webit-transform: rotate(600deg); -webkit-transform: translateY(-500); transform: translateY(-500) } } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { bottom: 400px; transform: rotate(600deg); -webit-transform: rotate(600deg); -webkit-transform: translateY(-500); transform: translateY(-500) } } </style></head><body> <div class="wrap"> <div class="container"> <h1>Welcome</h1> <form> <input type="text" placeholder="user login"/> <input type="password" placeholder="password"/> <input type="submit" value="Login"/> </form> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div></body></html>
0 0
- 一款很漂亮的CSS3登录界面
- 一款漂亮的登陆界面
- 漂亮的登录界面
- 漂亮的登录界面
- 很漂亮的Flex 用户登录界面
- 一个很漂亮的登录界面和注册界面
- 一款漂亮的css3打造的卡哇伊按钮
- 漂亮的登录界面 Login Form
- IOS制作一个漂亮的登录界面
- CSS3/HTML5实现漂亮的分步骤注册登录表单
- 用Html5和csss3做出漂亮的登录注册界面
- 一款漂亮的日期选择器
- 一款漂亮的分步控件
- 《题库管理系统》是一款操作使用简单,界面漂亮美观的教学管理应用软件。
- 一款很漂亮的带时间的月历
- 【js特效】一款很漂亮的相册效果
- JAVA漂亮的界面
- 漂亮的OA界面
- 检测wifi是否需要portal验证 公共场所wifi验证
- #238 (div.2) A. Gravity Flip
- hadoop单机环境配置
- HDU 1076 An Easy Task
- 深度学习 caffe 建自己的数据库 训练一个自创卷积神经网络 过程总结
- 一款很漂亮的CSS3登录界面
- 编码之痛(下)一个文件的旅行
- 选择排序
- 【ITOO高校云平台】——WCF配置文件
- Ubuntu 14.04 x64 安装 Android SDK(转载)
- c# Winform/WPF 开发分屏显示应用程序
- IOS中根据生日精确计算年龄
- poj 2516 Minimum Cost
- 终于写完了