No.7 - 使用 animate.css 实现一个优雅的登录框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>使用 animate.css 制作流畅交互动效</title>
<link rel="stylesheet" href="animate.css">
<style type="text/css">
html {
font-size: 62.5%;
font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
body {
font-size: 1.8em;
line-height: 3;
background-color: #eeeeee;
}
h3 {
font-size: 1.8em;
margin-bottom: 3rem;
line-height: 1.5;
font-weight: 800;
}
p {
margin-bottom: 1.5rem;
}
.site-container {
max-width: 320px;
margin: 10px auto;
padding-left: 0.6em;
padding-right: 0.6em;
padding-top: 3%;
padding-bottom: 3%;
}
@media screen and (min-width: 60.063em) {
.site-container {
max-width: 400px;
}
}
.card {
position: relative;
overflow: hidden;
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24), 0 1px 18px 0 rgba(0,0,0,0.12);
border-radius: 2px;
padding: 1em 1.5em;
}
.form__wrapper {
overflow: hidden;
position: relative;
z-index: 1;
display: inline-block;
margin-bottom: 1.6rem;
width: 100%;
vertical-align: top;
}
.form__wrapper__submit {
padding: 1.6rem 0;
}
.form__input {
display: block;
position: relative;
margin-top: 1em;
padding: 0.84em 0;
width: 100%;
box-sizing: border-box;
color: #444;
font-size: 1.6rem;
outline: 0;
border: none;
border-bottom: solid 1px #ddd;
}
.form__input:focus {
background-position: 0 0;
color: #444;
}
.form__label {
position: absolute;
bottom: 0;
left: 0;
padding: 0;
width: 100%;
height: calc(99%);
text-align: left;
pointer-events: none;
color: #999;
}
.form__label__content {
position: absolute;
transition: all 0.5s ease;
}
.form__input:focus ~ .form__label .form__label-content,
.form--filled .form__label-content {
}
.btn {
width: 100%;
display: inline-block;
padding: 0.7em 1.5em;
border-radius: 2px;
background-color: #2196f3;
color: #fff;
border: 0;
outline: none;
cursor: pointer;
font-family: inherit;
font-weight: 400;
font-size: 1.6rem;
box-shadow: 0 1px 3px 0 rgba(3,30,51,0.24), 0 1px 2px 0 rgba(3,30,51,0.12);
transition: all 0.2s ease;
}
.btn:focus,
.btn:hover {
background-color: #0d8aee;
}
input:focus{
border-bottom: solid 1px #0d8aee;
}
input:focus+label span{
transform: scale(0.9) translateY(-10px);
}
</style>
</head>
<body>
<section class="site-container">
<section class="card">
<h3>Login</h3>
<form>
<div class="form__wrapper" data-wow-delay="0.5s">
<input type="email" class="form__input" id="email" name="email">
<label class="form__label" for="email">
<span class="form__label__content">Email</span>
</label>
</div>
<div class="form__wrapper" data-wow-delay="0.6s">
<input type="password" class="form__input" id="password" name="password">
<label class="form__label" for="password">
<span class="form__label__content">Password</span>
</label>
</div>
<div class="form__wrapper__submit pulse infinite" data-wow-delay="0.7s">
<div class="form__input__submit">
<button type="submit" name="submit" class="btn">Submit</button>
</div>
</div>
</form>
</section>
</section>
</body>
<script src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
<script>
$("input").blur(function(){
var bird = $("input");
var val1 = $(bird[]).val();
var val2 = $(bird[]).val();
if(val1!=""&&val2!=""){
$(".btn").addClass("animated pulse infinite");
}
});
</script>
</html>
学习点：
①input：focus+label span
②animate.css
No.7 - 使用 animate.css 实现一个优雅的登录框的更多相关文章
- CSS效果：简单的登录框
HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- css 伪类选择器制作登录框表单
使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...
- bugku 一个神奇的登录框
一个登录界面,填个admin,123试试,提示try again 抓包看看. 在admin后加个’提示try again 看来是被过滤了,试试” 报错了,加上# 报错没有了,说明存在注入点. 先来判断 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- Animate.css 教程
animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中.不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果. 基本用法 引入CSS文件 这个对你来 ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
- Animate.css让添加CSS动画像喝水一样容易
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- JQuery插件之Animate.css和 jquery-aniview
Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(fl ...
随机推荐
- redis内存模型及应用解读
Redis是目前最火爆的内存数据库之一,通过在内存中读写数据,大大提高了读写速度,可以说Redis是实现网站高并发不可或缺的一部分. 我们使用Redis时,会接触Redis的5种对象类型:字符串.哈希 ...
- ssh 连接慢问题
连接先看报错: There were 11 failed login attempts since the last successful login. 先前有上百上千失败login,被攻击了,把短时 ...
- java map常用的4种遍历方法
public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...
- poj 3070 Fibonacci 矩阵相乘
Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7715 Accepted: 5474 Descrip ...
- HEOI2017 游记
你若安好,便是晴天. …… 人就像命运下的蝼蚁,谁也无法操控自己的人生. ——阮行止 …… Day 0 中午就要出发了,上午教练还搞了一场欢乐信心赛,然而还是挂惨了.T3是bzoj的原题,但是当时写的 ...
- 【MFC】CHtmlView::GetSource中文乱码的问题
在MFC的SDI中,使用CHtmlView::GetSource来获取网页源码,保存到本地,发现中文中的一部分乱码,有些中文正常.自己先试着转码等各种尝试,发现一无所获.网上也没有正确的解决方案. 自 ...
- QT开发（一）Vs2013集成 QT5.3.1
原文:http://www.cnblogs.com/aoldman/p/3860837.html 很久不写随笔了,真是越来越懒.最近公司要做一款产品,想使用QT不用WPF lol,让苦逼的.net的我 ...
- xfs参数简介
age_buffer_centisecs age_buffer_centisecs:(Min: 100 Default: 1500 Max: 720000) 多长时间设置为脏数据 xfsbufd_ ...
- 交叉编译 Cross-compiling for Linux
@(134 - Linux) Part 1 交叉编译简介 1.1 What is cross-compiling? 对于没有做过嵌入式编程的人,可能不太理解交叉编译的概念,那么什么是交叉编译?它有什么 ...
- CPU纯软件半虚拟化技术
在2003年出现的Xen,使用了另外的一种半虚拟化的方案来解决x86架构下CPU的敏感指令问题.主要采用Hypercall技术.Guest OS的部分代码被改变,从而使Guest OS会将和特权指令相 ...