参考：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. scala简单的文件操作

    1.scala写入文件操作 package com.test import java.io.File import java.io.PrintWriter /** * scala文件写入 */ obj ...

  2. js 字符串比较

    <script type="text/javascript"> function test(){ //1)纯数字之间比较 //alert(1<3);//true ...

  3. C#:文件、路径（Path_File）

    public class Path_File { public string AppPath { get { return AppDomain.CurrentDomain.BaseDirectory; ...

  4. 骑士cms(74cms)个人版 整合UC

    1.安装74cms完成后登录总后台在菜单条工具选项中添加uc整合菜单. 在admin/templates/sys/admin_left_tools.htm这个文件中添加 <li >< ...

  5. Oracle性能优化--AUTOTRACE 操作

    AUTOTRACE是一个SQL*Plus工具,用于跟踪SQL的执行计划,收集执行时所耗用资源的统计信息,是SQL优化工具之一,下面给出启用 AUTOTRACE 功能步骤. 一 .启用AUTOTRACE ...

  6. webconfig简单加密解密

    <?xml version="1.0"?><configuration> <configSections> <section name=& ...

  7. [转]Mac OS X framework 解析

    转载地址:http://hi.baidu.com/yonderbyron/item/9838b73472152e009cc65ec8 Mac OS X framework 解析 1.framework ...

  8. 20150608_Andriod 发布方法

    参考地址: http://www.jb51.net/article/42618.htm 第一步,在Eclipse中选择需要打包的项目,然后右键--选择Export,会弹出一个打包的提示框,如下图所示. ...

  9. Uniform Generator 分类： HDU 2015-06-19 23:26 11人阅读 评论(0) 收藏

    Uniform Generator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...

  10. Linux内存模型

    http://blog.csdn.net/sunyubo458/article/details/6090946 了解linux的内存模型,或许不能让你大幅度提高编程能力,但是作为一个基本知识点应该熟悉 ...