css过渡笔记
3D http://fangyexu.com/tool-CSS3Inspector.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #F00;
/*transition-property: all;
transition-duration: 4s;
transition-timing-function: ease;
transition-delay: 2s;*/
transition:bacground 4s linear 2s,
width 2s ease-in 1s; color: #FFF;
}
.father:hover .box {
margin-left: 500px;
}
.linear {
transition-timing-function: linear;
}
.ease {
transition-timing-function: ease;
}
.ease-in {
transition-timing-function: ease-in;
}
.ease-out {
transition-timing-function: ease-out;
}
.ease-in-out {
transition-timing-function: ease-in-out;
}
.cubic-bezier {
transition-timing-function: cubic-bezier(0.9, 1.26, 0.11, -0.9);
}
</style>
</head>
<body>
<div class="father">
<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box ease-in-out">ease-in-out</div>
<div class="box cubic-bezier">cubic-bezier</div>
</div>
</body>
</html>
css过渡笔记的更多相关文章
- Head First HTML与CSS阅读笔记（二）
上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
随机推荐
- Using Time Profiler in Instruments
要用 release 版本来profile 概述 time profile 是使用采样的方法来统计,而不是记录每一个方法调用的起始和结束,采样间隔是 1 ms.  在上图中,main 函数被采样了 ...
- 题解 P3628 【[APIO2010]特别行动队 】
题目大意 给你一个序列, 将这个序列分成若干段, 每一段的贡献为 \(ax ^ 2 + bx + c\)(x 为 这一段的权值之和) 具体思路 50pts 考虑Dp, 设\(Dp_i\)为前i ...
- POJ 2371
#include<iostream> #include<stdio.h> #include<string> using namespace std; int com ...
- Java之集合(十四)Hashtable
转载请注明源出处:http://www.cnblogs.com/lighten/p/7426522.html 1.前言 HashTable这个类很奇特,其继承了Dictionary这个没有任何具体实现 ...
- Java学习之路(十二)：IO流<二>
字符流 字符流是可以直接读写字符的IO流 使用字符流从文件中读取字符的时候,需要先读取到字节数据,让后在转换为字符 使用字符流向文件中写入字符时,需要把字符转为字节在写入文件 Reader和Write ...
- apache URL重写 标志表 以及 错误解决方法
Apache mod_rewrite规则重写的标志一览 1) R[=code](force redirect) 强制外部重定向 强制在替代字符串加上http://thishost[:thisport] ...
- ASP.NET5使用FaceBook登录
原版教程 使用VS2015创建Web应用: 此教程使用的是FaceBook账号登录,需要添加相关的类,打开Nuget: 搜索Microsoft.AspNet.Authentication.Facebo ...
- Tomcat 访问manager app报403 解决方案（虚拟机可以正常使用，外面访问报错）
虚拟机中Tomcat启动后,可以访问项目(虚拟机里面和外面都可以).虚拟机中能够正常进入manager app进行热部署工作,但是在外面能访问tomcat首页,点击manager app报403错误. ...
- 前端通信：ajax设计方案（四）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
- oracle 执行的时候,显式输出结果!: set serveroutput on;