参考：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. java多线程中的生产者与消费者之等待唤醒机制@Version1.0

    一.生产者消费者模式的学生类成员变量生产与消费demo,第一版1.等待唤醒:    Object类中提供了三个方法:    wait():等待    notify():唤醒单个线程    notify ...

  2. shell获取目录下最新的文件，文件是以日期命名

    如果你为每个文件按日期命名的格式都一致的话,那么 "ls -l" 命令列出的文件列表就是默认按文件名称(日期先后)排序的.那么最后一个就是最新的,文件名可以用以下方式获取.file ...

  3. 每日一九度之 题目1039：Zero-complexity Transposition

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3372 解决:1392 题目描述: You are given a sequence of integer numbers. Zero-co ...

  4. 三种用于select 的选择器

    <html lang="en"> <head> <meta charset="utf-8"> <title>选项 ...

  5. PHP json_encode() 函数介绍

    在 php 中使用 json_encode() 内置函数(php > 5.2)可以使用得 php 中数据可以与其它语言很好的传递并且使用它. 这个函数的功能是将数值转换成json数据存储格式. ...

  6. ds.Merge 与 ds.Tables[0].Merge 的用法

    DataSet ds = new DataSet(); SqlConnection conn = new SqlConnection(ConnectionStr);            SqlCom ...

  7. python两个dataframe的合并

    见http://pandas.pydata.org/pandas-docs/stable/merging.html

  8. CentOS安装solr 4.10.3

    Solr是什么? Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr提供了比Lucene更为丰富的查询语言,同时实现了可配置.可扩展,并对索 ...

  9. Thread的六种状态

    线程共有6种状态:在某一时刻只能是这6种状态之一.这些状态由Thread.State这个枚举类型表示,并且可以通过getState()方法获得当前具体的状态类型. 包括(new,runnable,bl ...

  10. ldataset 与 list 的使用

    [WebMethod(Description = @"根据时间查询会议项目[时间格式为:2014-01-01] DateTime StartTime , DateTime Endtime & ...