<!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. read progress

    <GNU+make中文手册-v3.80> 14 跟我一起写 Makefile 8 51单片机及c语言程序开发实例7/20/465

  3. Linux 搭建FTP

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

  4. 20145304 Exp5 MSF基础应用

    20145304 Exp5 MSF基础应用 实验后回答问题 (1)用自己的话解释什么是exploit,payload,encode. exploit是生成或启动已经设置好的攻击程序,获得相应权限.在实 ...

  5. 20135234mqy-——信息安全系统设计基础第十一周学习总结

    第八章 异常控制流 8.1异常 异常是异常控制流的一种形式,它一部分是由硬件实现的,一部分是由操作系统实现的. 异常就是控制流中的突变,用来响应处理器状态中的某些变化. 8.1.1异常处理 异常号是到 ...

  6. Python3基础 try-多个指定except与不指定except 简单示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. B-树 B+树 B*树

    区分B树,B-树 有的文章说二叉查找树(Binary Search Tree,BST)就是B树,这个我总结来说是不对的 B树和B-树是同一种树,只不过英语中B-tree被中国人翻译成了B-树,让人以为 ...

  8. 51nod 1020 逆序排列 递推DP

    1020 逆序排列  基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么 ...

  9. 论文笔记：Mastering the game of Go with deep neural networks and tree search

    Mastering the game of Go with deep neural networks and tree search Nature 2015  这是本人论文笔记系列第二篇 Nature ...

  10. IDEA Spring-boot-devTools 无效解决办法二

    转载地址:Intellij IDEA 使用Spring-boot-devTools无效解决办法 相信大部分使用Intellij的同学都会遇到这个问题,即使项目使用了spring-boot-devtoo ...