CSS笔记（十三）CSS3之过渡
参考：http://www.w3school.com.cn/css3/css3_transition.asp
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡属性
下面的表格列出了所有的转换属性：
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
实例１
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
} div:hover
{
width:300px;
}
</style>
</head>
<body> <div></div> <p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body>
</html>
实例２
<!DOCTYPE html>
<html>
<head>
<style>
.animated_div
{
width:65px;
height:40px;
background:#92B901;
color:#ffffff;
position:absolute;
font-weight:bold;
font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
padding:20px 10px 0px 10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
} .animated_div:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:16px;
}
</style>
</head>
<body> <div></div>
<p class="animated_div">CSS3 过渡</p> </body>
</html>
变化前效果：
过程中：
CSS笔记（十三）CSS3之过渡的更多相关文章
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- 《C++游戏开发》笔记十三 平滑过渡的战争迷雾(一) 原理：Warcraft3地形拼接算法
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9611887 作者:七十一雾央 新浪微博:http:/ ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- python3.4学习笔记(十三) 网络爬虫实例代码，使用pyspider抓取多牛投资吧里面的文章信息，抓取政府网新闻内容
python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- java之jvm学习笔记十三(jvm基本结构)
java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...
- animate.css – 齐全的CSS3动画库
animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...
随机推荐
- MySQL OnlineDDL
参考资料: http://dev.mysql.com/doc/refman/5.6/en/innodb-create-index-overview.html http://www.mysqlperfo ...
- Linux系统调用--mmap/munmap函数详解【转】
转自:http://www.cnblogs.com/leaven/archive/2011/01/14/1935199.html http://linux.chinaunix.net/techdoc/ ...
- Java 门面模式 浅析
Java中的门面模式,一般来说他的用途是隐藏一些不希望用户看到的东西,比如方法,变量,并且这些变量是不能够设置成私有的,因为在系统内部有些地方需要调用.在Tomcat的HttpServletReque ...
- 【JQGRID DOCUMENTATION】.学习笔记.3.Pager
处理大量数据时,一次只想显示一小部分.这时就需要Navigation Bar.目前Pager不能用于TreeGrid. 定义 }); 定义高度grid,pager是grid的一部分,宽度等于gird的 ...
- php number_format()保留小数点后几位
[PHP_保留两位小数的相关函数] php保留两位小数并且四舍五入 Php代码 1 $num = 123213.666666; 2 echo sprintf("%.2f ...
- Greenplum的全量备份之gpcrondump
gpcrondump是对gp_dump的一个包装,可以直接调用或者从crontab中调用.这个命令还允许备份除了数据库和数据之外的对象,比如数据库角色和服务器配置等. gpcrondump 常用到的参 ...
- android19以上和以下uri转路径的方法
android 19以上 /** * 专为Android4.4以上设计的从Uri获取文件路径 */ public static String getPath(final Context context ...
- 【转】成功在AMD主机上用虚拟机安装原版雪豹
转载地址:http://www.jzh.me/archives/205.html/comment-page-1 一直都很想安装苹果的系统,当雪豹出来的时候就更加想了,但是自己的机器是AMD的,而且还是 ...
- java中两种单例模式
//懒汉式(线程不安全) class LazySingleton{ private static LazySingleton singleton; private LazySingleton(){} ...
- Intellij IDEA svn的使用记录
这里的忽略一直灰色的,可以进入 这里的版本控制里进行忽略选择 或者 这里进行添加 这里有三个选择 按照顺序 1.忽略指定的文件 2.忽略文件夹下所有文件 3.忽略符合匹配规则的文件 到Commit C ...