<!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. 终于在nowcoder爆发了的懒惰

    题目 这类题目我实在忍不了了 Emma,随便做个nowcode比赛题吧,我在oj上也没找到 题意 求\(\sum_{L=1}^{n}\sum_{R=i}^{n}a[k](L<=k<=R)\ ...

  2. junit中test注解测试使用案列解析二

    本文原创,转载请注明出处 在上文中,已经简单的解析了junit中test注解的使用方法,今天在进行test测试时,遇到了一个异常,于是想深 入的研究一下. 还原一下今天的异常代码: @Service ...

  3. IDEA启动时自动报Plugin Error错误

    Plugin Error Problems found loading plugins: Plugin "JBoss Integration" was not loaded: re ...

  4. 说说前端那些事之ajax

    原生ajax请求 前些日子,忙着考驾照,没有时间对知识进行总结,感到十分惭愧啊,刚好趁现在有时间,做个知识总结,希望对各位有所帮助. 很多人都知道ajax是用来进行数据请求的,但是具体的请求方法会有些 ...

  5. c++ 容器元素填充（fill）

    #include <iostream> // cout #include <algorithm> // fill #include <vector> // vect ...

  6. （转）c++一些知识点

    异常详解: https://www.cnblogs.com/hdk1993/p/4357541.html#top 模版详解: https://blog.csdn.net/lezardfu/articl ...

  7. IIS中发布后出现Could not load file or assembly'System.Data.SQLite.dll' or one of its depedencies

    [问题]在我本机的开发环境c#连接sqlite3没有问题,可是release版本移植到其他的机器就提示Could not load file or assembly'System.Data.SQLit ...

  8. yii新手在实例化models(controller调用models实化化)php warning错误

    新手在执照yii教程来的时候,config/main.php文件是全新写的,post提交的时候,会出错 include(LoginForm.php) [<a href='function.inc ...

  9. delphi文件名获取方法

    取文件名 ExtractFileName(FileName); 取文件扩展名: ExtractFileExt(filename); 取文件名,不带扩展名: 方法一:   Function Extrac ...

  10. [.NET开发] C#连接MySQL的两个简单代码示例

    实现代码一.使用的是mysql自带的驱动安装一下即可 这是一个简单的例子. 在这里有个问题:dataset如果没设主键的话,可能会引起一些对数库操作的问题,比如会造成updata出现错误. stati ...