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 ...
随机推荐
- [JAVA IDEA]在使用maven项目中，无法读取resources文件夹中的配置文件的一种解决方案
1.在通过配置文件来连接数据库时,在resouces文件中放入了db.properties配置文件,但无法正常读取到 读取配置文件信息的代码: InputStream input=JdbcUtil.c ...
- Oracle数据库RowId
RowId是什么? RowId是根据每一行数据的物理信息地址编码而成的一个位列,利用RowId可以快速定位到某一行. Oracle数据库编辑数据必须查出RowId,可以根据如下语句查询: select ...
- Class.forName("com.mysql.jdbc.Driver")找不到类
解决方法: 如果是java项目,只需要引入mysql-connector-java-8.0.13.jar就可以运行java项目. 建的如果是web工程,需要把mysql-connector-java- ...
- Python3.7安装Geenlet
1.首先再python文件下的Scripts文件夹下有这几个文件: 2.打开Scripts文件夹下可能你会发现是空的,这时候就要先安装setuptools了,安装完后Script文件下就出现上图的文件 ...
- Linux 的su 与sudo 的区别,查看所有用户
首先,我们要知道系统当中存在哪些用户. 1.用户名和密码的存储位置 存储帐号的文件:/etc/passwd 存储密码的文件:/etc/shadow 通过/etc/shadow获取的只是密码加密后的Ha ...
- Python 获得汉字笔画
通过unihan的文件来实现. 只要是unihan中有kTotalStrokes字段,获取其笔画数. Hash也是非常简单清楚的,但想到这些unicode其实会有一个分布规律,就记录了一下, 利用此性 ...
- eclipse 乱码问题总结
Eclipse 的控制台必须用GBK编码.所以条件1和条件4必须同时满足否则运行的还是乱码.才能保证不是乱码. 条件1,Window | Preferences | Workspace | T ...
- python之路——网络基础
你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运行,你就会发现,这两个python的文件分别运行的很好.但是如果这两个程序之间想要传递一个数据,你要怎么做 ...
- LED相关
P10 模组 分辨率32*16 尺寸320*160 间距 10mm P8 模组 分辨率32*16 尺寸256*128 间距 8mm P7.62 模组 分辨率 ...
- Excel操作之级联菜单
设置级联菜单主要用的是excel的数据验证功能.下面以简单的设置城市选择框为例: 1.准备好数据 2.给所有省份起个名称(例如:省份),然后同样方法给每个省份所对应的城市以其省份命名,(例如:南京.苏 ...