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 ...
随机推荐
- 十一、spark SQL的scala示例
简介 spark SQL官网:http://spark.apache.org/docs/latest/sql-programming-guide.html sparkSQL是构建在sparkCore之 ...
- git 命令合并分支代码
git 命令合并分支代码 对于复杂的系统,我们可能要开好几个分支来开发,那么怎样使用git合并分支呢? 合并步骤: 1.进入要合并的分支(如开发分支合并到master,则进入master目录) git ...
- PAT 1074. Reversing Linked List
#include <cstdio> #include <cstdlib> #include <iostream> #include <unordered_ma ...
- jQuery动态创建的dom对象不能绑定事件的解决方法
参照网上前辈: 方法一:绑定live事件 live(type,[data],fn) $(selector).live("click",function(){ alert(" ...
- GDAL线面互转换
最近因为项目需要,需做GDAL线面互转的功能,查阅部分资料完成,下面把核心部分的代码贴出来,留个记录,也欢迎大家提问题指正完善. /* * @brief ConvertPolygonToPolylin ...
- 护航SMB网络安全 应选择新一代防火墙
当前,各种规模的企业都遭遇着日益增多的网络攻击,而其中以中小企业(SMB)为代表的广大群体则更加面临敏感数据.公司资产和知识产权不断暴露在风险中的窘境.为了帮助企业应对这一挑战,新一代防火墙的采购与部 ...
- Kali 防火墙配置
Kali操作系统安装时默认已经安装了"iptables",配置前先检查有没有安装,命令如下:iptables -L显示如下(图1),则表示已经安装了,如果没有安装,使用命令:apt ...
- 图像去噪算法：NL-Means和BM3D
图像去噪是非常基础也是非常必要的研究,去噪常常在更高级的图像处理之前进行,是图像处理的基础.可惜的是,目前去噪算法并没有很好的解决方案,实际应用中,更多的是在效果和运算复杂度之间求得一个平衡,再一次验 ...
- C++多线程编程（教程+Demo)
下载地址:C++多线程编程(教程+Demo) Win32 SDK函数支持进行多线程的程序设计,并提供了操作系统原理中的各种同步.互斥和临界区等操作.Visual C++ 6.0中,使用MFC类库也实现 ...
- Spring MVC基本配置和实现(四)
1.参数绑定:(从请求中接收参数) 1)默认支持的类型:Request,Response,Session,Model 2)基本数据类型(包含String) 3)Pojo类型 4)Vo类型 5)Conv ...