网站首页
网站导航
Ctrl+D收藏
首 页
代码段
源码包
文档库
工具箱
代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
简洁时尚的CSS3用户登录界面设计
作者:
Randolph
/ 发布于
2015/7/16
/
692
@import url(http://fonts.useso.com/css?family=Source+Sans+Pro:200,300); * { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } body ::-webkit-input-placeholder { /* WebKit browsers */ font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } body :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-family: 'Source Sans Pro', sans-serif; color: white; opacity: 1; font-weight: 300; } body ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-family: 'Source Sans Pro', sans-serif; color: white; opacity: 1; font-weight: 300; } body :-ms-input-placeholder { /* Internet Explorer 10+ */ font-family: 'Source Sans Pro', sans-serif; color: white; font-weight: 300; } .wrapper { background: #50a3a2; background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); opacity: 0.8; position: absolute; left: 0; width: 100%; height: 400px; overflow: hidden; } .wrapper.form-success .container h1 { -webkit-transform: translateY(85px); -ms-transform: translateY(85px); transform: translateY(85px); } .container { max-width: 600px; margin: 0 auto; padding: 80px 0; height: 400px; text-align: center; } .container h1 { font-size: 40px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-put; transition-timing-function: ease-in-put; font-weight: 200; } form { padding: 20px 0; position: relative; z-index: 2; } form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block; text-align: center; font-size: 18px; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; } form input:hover { background-color: rgba(255, 255, 255, 0.4); } form input:focus { background-color: white; width: 300px; color: #53e3a6; } form button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: white; border: 0; padding: 10px 15px; color: #53e3a6; border-radius: 3px; width: 250px; cursor: pointer; font-size: 18px; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } form button:hover { background-color: #f5f7f9; } .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: -160px; -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .bg-bubbles li:nth-child(1) { left: 10%; } .bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 17s; animation-duration: 17s; } .bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s; animation-delay: 4s; } .bg-bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; -webkit-animation-duration: 22s; animation-duration: 22s; background-color: rgba(255, 255, 255, 0.25); } .bg-bubbles li:nth-child(5) { left: 70%; } .bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; -webkit-animation-delay: 3s; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); } .bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px; -webkit-animation-delay: 7s; animation-delay: 7s; } .bg-bubbles li:nth-child(8) { left: 55%; width: 20px; height: 20px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 40s; animation-duration: 40s; } .bg-bubbles li:nth-child(9) { left: 25%; width: 10px; height: 10px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); } .bg-bubbles li:nth-child(10) { left: 90%; width: 160px; height: 160px; -webkit-animation-delay: 11s; animation-delay: 11s; } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } }
评论列表
本站所提供的代码,版权归原作者所有,若有侵犯作者版权,请与我们联系,我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。
试试其它关键字
CSS3
登录界面
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后,在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现,不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
.
实现对图片上传的接收
.
判断用户输入的是否为IP地址
Randolph
贡献的其它代码
(
8
)
.
Android实现手机振动设置
.
Android实现音量调节的方法
.
正则表达式匹配Java
.
简洁时尚的CSS3用户登录界面设计
.
获取某个月份的天数
.
接口数据加密、解密、验证签名
.
可变参数
.
跳转表
地图
本站
我们
服务
版权
联系
回馈
博客