参考：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之过渡的更多相关文章

  1. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  2. 《C++游戏开发》笔记十三 平滑过渡的战争迷雾(一) 原理：Warcraft3地形拼接算法

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9611887 作者:七十一雾央 新浪微博:http:/ ...

  3. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  4. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  5. css3的过渡、动画、2D、3D效果

    浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...

  6. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

  7. python3.4学习笔记(十三) 网络爬虫实例代码，使用pyspider抓取多牛投资吧里面的文章信息，抓取政府网新闻内容

    python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...

  8. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  9. java之jvm学习笔记十三(jvm基本结构)

    java之jvm学习笔记十三(jvm基本结构) 这一节,主要来学习jvm的基本结构,也就是概述.说是概述,内容很多,而且概念量也很大,不过关于概念方面,你不用担心,我完全有信心,让概念在你的脑子里变成 ...

  10. animate.css – 齐全的CSS3动画库

    animate.css – 齐全的CSS3动画库 演 示 下 载   简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounc ...

随机推荐

  1. html5 图片热点area，map的用法

    今天看了一个html5在图片上面创建热点的标签,所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接!如果下面是一张图片的话,里面在长方形.圆形.三角形区域都可以进入其他网页! ...

  2. linux设备驱动归纳总结（三）：6.poll和sellct【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-61749.html linux设备驱动归纳总结(三):6.poll和sellct xxxxxxxxxx ...

  3. Linux字符设备驱动结构（一）--cdev结构体、设备号相关知识机械【转】

    本文转载自:http://blog.csdn.net/zqixiao_09/article/details/50839042 一.字符设备基础知识 1.设备驱动分类 linux系统将设备分为3类:字符 ...

  4. A4纸网页打印——宽高设置

    一.在公制长度单位与屏幕分辨率进行换算时,必须用到一个DPI(Dot Per Inch)指标. 经过我仔细的测试,发现了网页打印中,默认采用的是96dpi,并非传闻的72dpi . A4纸张的尺寸是2 ...

  5. Spring注解@Scheduled定时任务

    一.首先配置applicationContext-task.xml (1)添加 xmlns:task="http://www.springframework.org/schema/task& ...

  6. Mysql query log

    一.查询日志的概念: 查询日志记录MySQL中所有的query,通过"--log[=file_name]"来打开该功能.由于记录了所有的query,包括所有的select,体积比较 ...

  7. POJ 3903：Stock Exchange（裸LIS + 二分优化）

    http://poj.org/problem?id=3903 Stock Exchange Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  8. 对Discuz的简单认识

    Discuz是php的一个开源论坛系统,是由康盛创想公司2004开发,从Discuz! 1.0到 现在的Discuz X3,无论从功能上还是从用户体验上,都达到了一个质的飞越.主要包括论坛.门户.群组 ...

  9. python 拷贝文件夹下所有的文件到指定文件夹（不包括目录）

    1.随便简单些写了一下.直接粘结代码,只是简单的实现一下,还很多需要完善和扩展的地方,比如忽略掉后缀文件,删除文件 如果排除的某些的话可以用: sourceF.find('.后缀')>0 2.注 ...

  10. jdk 与jre的区别

    jdk就是java的开发工具集,顾名思义就是你做开发用的,其中包括javac,也就是java compiler等. jre(java runtime environment),就是java程序的运行环 ...