<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> 背景色变化</title>
    <style>
        div {
        width:600px;
        height:40px;
        border:2px solid #000;
       padding:6px;
        font-size:18px;
        background:#b9f7b4;
        margin:3px auto;
        }
        .t1{
        -moz-transition:background-color 4s linear;
        -webkit-transition:background-color 4s linear;
        -o-transition:background-color 4s linear;
        }
            .t1:hover {
            background:#808080;
            }
        .t2 {
        -moz-transition:background-color 4s ease;
         -webkit-transition:background-color 4s ease;
        -o-transition:background-color 4s ease;
        }
          .t2:hover {
            background:#ffd800;
            }
        .t3 {
        -moz-transition:background-color 4s ease-in;
        -webkit-transition:background-color 4s ease-in;
        -o-transition:background-color 4s ease-in;
        }
         .t3:hover {
            background:#ffd800;
            }
        .t4 {
        -moz-transition:background-color 4s ease-out;
         -webkit-transition:background-color 4s ease-out;
          -o-transition:background-color 4s ease-out;
        }
        .t4:hover {
            background:#ffd800;
            }
         .t5 {
        -moz-transition:background-color 4s ease-in-out;
         -webkit-transition:background-color 4s ease-in-out;
          -o-transition:background-color 4s ease-in-out;
        }
        .t5:hover {
            background:#ffd800;
            }
        .t6 {
          -moz-transition:background-color 4s ease;
         -webkit-transition:background-color 4s ease;
          -o-transition:background-color 4s ease;
        -moz-transition:width 4s ease;
        -webkit-transition:width 4s ease;
        -o-transition:width 4s ease;
        }
            .t6:hover {
            width:200px;
             background:#ffd800;
            }
    </style>
</head>
<body>
    <p  style="width:600px; margin:0 auto; font-size:24px; font-weight:bold">
        1 transition-property:指定对HTML元素的那个CSS属性进行平滑渐变处理。
        该属性可以指定background-color、width、height等各种标准的CSS属性<br />
        2 transition-duration:指定属性平滑渐变的持续时间<br />
        3 transition-time-function:指定渐变的速度
    </p>
   <p style="width:600px; height:40px; color:#f00; margin:0 auto; font-size:24px; font-weight:bold">鼠标移上来会发生颜色渐变</p>
   <div class="t1">linear:线性速度。动画开始的速度到结束的速度保持不变</div>
   <div class="t2">ease:动画开始时较慢，然后速度加快，到达最大的速度之后再减速</div>
    <div class="t3">ease-in:动画开始时速度较慢，然后速度加快</div>
    <div class="t4">ease-out:动画开始时很快，然后速度减速</div>
    <div class="t5">ease-in-out:动画开始时较慢，然后速度加快，到达最大速度时再减慢速度</div>
    <div class="t6">宽度由600px变为200px；背景由浅蓝变为黄色；ease</div>

</body>
</html>

CSS3提供的transition动画的更多相关文章

  1. css3 Transition动画执行时有可能会出现闪烁的bug

    css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候. 解决方法: 1.-webkit-backface-visibility: hidden; 2.-webkit- ...

  2. CSS3的transition动画功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. css3中变形与动画（一）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  4. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  5. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  6. CSS3全览_动画+滤镜

    CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...

  7. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  8. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  9. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

随机推荐

  1. Centos下安装git高版本2.1.2

    安装依赖软件 # yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel asciidoc # yum in ...

  2. Linux 搭建FTP

    Linux 搭建FTP 步骤一:安装 vsftpd 1,运行以下命令安装 vsftpd. yum install -y vsftpd 出现下图表示安装成功. 2,打开etc/vsftpd cd /et ...

  3. spring mybatis 3.2调用mysql存储过程返回多结果集（完整、亲测、可用）

    最近,有个开发提了个需求,希望中间件支持调用mysql存储过程时支持多结果集返回,因为某些原因我们使用了不少的存储过程,很多复杂的逻辑目前来看交互非常的多,所以从当前的现状来说,这个需求还是蛮合理的. ...

  4. jackson 常用注解，比如忽略某些属性，驼峰和下划线互转

    一般情况下使用JSON只使用了java对象与字符串的转换,但是,开发APP时候,我们经常使用实体类来做转换:这样,就需要用到注解: Jackson默认是针对get方法来生成JSON字符串的,可以使用注 ...

  5. 01: 企业微信API开发前准备

    目录:企业微信API其他篇 01: 企业微信API开发前准备 02:消息推送 03: 通讯录管理 04:应用管理 目录: 1.1 术语介绍 1.2 开发步骤 1.1 术语介绍返回顶部 参考文档:htt ...

  6. 04: Form 验证用户数据 & 生成html

    目录:Django其他篇 01:Django基础篇 02:Django进阶篇 03:Django数据库操作--->Model 04: Form 验证用户数据 & 生成html 05:Mo ...

  7. Duilib 实现右下角弹出像QQ新闻窗口，3秒后窗口透明度渐变最后关闭，若在渐变过程中鼠标放到窗口上，窗口恢复最初状态(二)

    效果: 1.定义两个个定时器ID #define ID_TIMER_DISPLAY_DELAY 30 #define ID_TIMER_DISPLAY_CLOSE 40 2.添加一个成员函数和成员变量 ...

  8. CEF解决加载慢问题

    转载:http://blog.csdn.net/weolar/article/details/51994895 CEF加载慢的时候,加上以下代码,通过命令行的方式: CefRefPtr<CefC ...

  9. thinkphp中的Ueditor的使用, 以及如何传递编辑器内容到后台?

    在线编辑器有很多很多, 而且大多是开源的. uediotr基于mit协议, 开源, 可以用于商业和非商业的 任意使用和修改都可以 如果两个相连接的 相邻的 元素之间 因为边框重叠 而显得中间的边框线很 ...

  10. C#中的编译开关

    c#不支持宏定义,只支持编译开关. ======================================我想加上#define xxx就编译a代码,否则编译b代码,像这样的:#if xxxa ...