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 ...
随机推荐
- 21、JavaScript加强
1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用 声明:服务端我们使用Servlet技术 ...
- sqlite加密
一直使用sqlite来管理本地的数据,但是Xcode中的SDK中集成的sqlite是免费的,不提供加密模块,但是程序中用到的很多数据,有时候是不想让别人看到,一开始虑修改sqlite的源码,自己重新编 ...
- ecshop的几个小瑕疵
在安装Ecshop的时候,遇到两个问题: 1.Strict Standards: Non-static method cls_image::gd_version() should not be cal ...
- Mongodb 和Redis 的相同点和不同点
MongoDB和Redis都是NoSQL,采用结构型数据存储.二者在使用场景中,存在一定的区别,这也主要由于二者在内存映射的处理过程,持久化的处理方法不同.MongoDB建议集群部署,更多的考虑到集群 ...
- 温故而知新 clone
浅复制(浅克隆) 被复制对象所有变量都含有与原来对象的相同值,对象中对其他对象的引用仍然指向原来的对象,换言之,复制对象只复制考虑的对象,而不复制所引用的对象.继承自java.lang.Object类 ...
- 20150625_Andriod_01_ListView1_条目选中
android listview 参考地址: http://www.cnblogs.com/zhengbeibei/archive/2013/05/14/3078805.html http://xy ...
- Codeforces Round #337 Vika and Segments
D. Vika and Segments time limit per test: 2 seconds memory limit per test: 256 megabytes input ...
- 分组排序SQL
SELECT * FROM (SELECT columns,ROWNUM AS RN FROM (SELECT DISTINCT columns FROM table WHERE 1=1)) T WH ...
- Opencv中直线的表示方法
[blog算法原理]Opencv中直线的表示方法 一.问题的提出: 在实际项目编写过程中,需要对直线(Line)进行特定的处 ...
- windows下UDP服务器和客户端的实现
UDP是面向非连接的协议,因此在实现UDP服务器时,服务器不用总是处于监听状态.可以直接收发数据. 服务器端 1.初始化 WASStartup ( ... ) 2.创建Socket s ...