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基础（3）——变量
从这篇文章起开始正式进入正题啦,本文将较为简单的介绍一下变量以及常量.变量,顾名思义,就是可以变的量,常量那么久相反了,常常不变的量就叫常量._(¦3」∠) 变量 在 Java 中,任何一个变量都得有 ...
- Java开发相关官方存档下载地址
前言 集中收藏Java开发中需要用到的常用下载地址 jdk Java SE 最新下载 | Oracle 技术网 : http://www.oracle.com/technetwork/cn/java/ ...
- html全局属性(收藏)
HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元素. 参考链接:http://www.w3school.com.cn/tags/html_ref_standardattrib ...
- IDEA搭建普通java项目
初始化配置: 第一步:
- java util 中set,List 和Map的使用
https://www.cnblogs.com/Lxiaojiang/p/6231724.html 转载
- 【SSH网上商城项目实战16】Hibernate的二级缓存处理首页的热门显示
转自:https://blog.csdn.net/eson_15/article/details/51405911 网上商城首页都有热门商品,那么这些商品的点击率是很高的,当用户点击某个热门商品后需要 ...
- java设计模式-----8、策略模式
Strategy模式也叫策略模式是行为模式之一,它对一系列的算法加以封装,为所有算法定义一个抽象的算法接口,并通过继承该抽象算法接口对所有的算法加以封装和实现,具体的算法选择交由客户端决定(策略).S ...
- CNN中卷积过程中padding的使用
1.podding='SAME'时,全0填充. 2.padding=“VALID”,不使用全0填充
- 如何用Fireworks制作经典的扫光字GIF动画
1.首先我们把背景选为黑色.再输入文字用白色填充,注意调整文字之间的间隔. 2.选中字体,对其进行转换为路径文件. 3.对间隔再做少许调整. 4.复制文字改为黑色,做平移,出现立体效果. 5.再复制一 ...
- 使用ArcGIS Chef Cookbook轻松搞掂WebGIS平台部署
1.安装Chef Client v12版本. 2.复制arcgis cookbook资源到Chef安装目录. 3.考虑到一般部署的服务器环境无法连接互联网,所以需要事先部署ArcGIS Cookboo ...