<!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. 基于Swoole和Redis实现的并发队列处理系统

    背景 由于PHP不支持多线程,但是作为一个完善的系统,有很多操作都是需要异步完成的.为了完成这些异步操作,我们做了一个基于Redis队列任务系统. 大家知道,一个消息队列处理系统主要分为两大部分:消费 ...

  2. ELK之logstash6.5

    首先安装,这里采用rpm安装: # rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch 创建repo文件: [root@no ...

  3. 20165310_获奖感想与Java阶段性学习总结

    获奖感想与Java阶段性学习总结 一.Learning By Doing ​ 在此之前,其实我并没有想到能够成为小黄杉的第一批成员之一,喜悦之余,也感受到了许多的压力.小黄杉一方面代表了老师对于我这一 ...

  4. Java中的三大框架分别有什么用

    一.Spring Spring是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是 ...

  5. 常用模块之 shutil，json，pickle，shelve，xml，configparser

    shutil 高级的文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length]) 将文件内容拷贝到另一个文件中 import shutil shut ...

  6. 高通平台读写nv总结【转】

    本文转载自:https://blog.csdn.net/suofeng12345/article/details/52713993 一,引言      1. 什么是NV       高通平台的NV,保 ...

  7. HDU 1285 确定比赛名次（拓扑排序）题解

    Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委 ...

  8. java的Date() 转换符

    本字段下均转自 csdn 阿念1989 本文是学习网络上的文章时的总结,感谢大家无私的分享. System.out.printf()方法可以对日期做处理输出. 对应列表 转换符 类型 举例 c 完整的 ...

  9. java中集合格式及json格式的特点和转换

    作者原创:转载请注明出处 今天在写代码,遇到一个难点,由于要调用webservice接口,返回的为一个list集合内容,从webservice调用接口返回的为一个string的io流, 在调用接口的地 ...

  10. 用 C# 计算 与 java 一致的unix时间戳 （长时间整形 如：1476956079961）

    背景: 调用java提供接口,需要长时间整形作为验证. 预备知识: 1. java 的 System.currentTimeMillis() 计算的长整型,是从1970年1月1日开始,截止当前的毫秒数 ...