<!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. c++ sleep(windows/linux)

    c标准中包含了一个sleep用以实现当前线程暂停执行n毫秒,如下所示: 函数名: sleep 功 能: 执行挂起一段时间 用 法: unsigned sleep(unsigned seconds); ...

  2. C++设计模式 之 “对象创建”模式：Factory Method、Abstract Factory、Prototype、Builder

    part 0 “对象创建”模式 通过“对象创建” 模式绕开new,来避免对象创建(new)过程中所导致的紧耦合(依赖具体类),从而支持对象创建的稳定.它是接口抽象之后的第一步工作. 典型模式 Fact ...

  3. Unity3D之预设

      预设的两个特性: 1.重用性.可以使我们快速方便的创建大量的重复性资源.这种创建是通过预设的实例化Instance操作来完成的 在Hierarchy视图中将实例物理添加到Assests中,此时图标 ...

  4. 20145334赵文豪《网络对抗》shellcode注入&Return-to-libc攻击深入

    Shellcode注入 shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢出,覆盖成为指向 shellcode 的地址 下载安装 ...

  5. Duilib 实现右下角弹出像QQ新闻窗口，3秒后自动关闭(一)

    转载:https://blog.twofei.com/667/ 自绘或子类化控件时,有时需要处理鼠标进入(MouseEnter)/鼠标离开(MouseLeave)/鼠标停留(MouseHover)消息 ...

  6. git_如何查看两个版本之间那些文件被修改

    需求 由于工程比较庞大,接近500M,每部署一次如果都全量部署,不仅仅磁盘空间耗费较大,最主要是要等很长时间, 之前就一直有这个问题,但是也就没有弄,上周领导发话了,这个问题必须要解决了 前记 增加带 ...

  7. Python3基础 file open+write 对不存在的txt进行创建与写入

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

  8. Linux必备知识

    一.Linux命令行常用快捷键 在企业工作中,管理Linux时—般不会直接采用键盘.显示器登录系统,而是会通过网络在远程进行管理,因此,需要通过远程连接具连接到Linux系统中.目前最常用的Linux ...

  9. BZOJ4401: 块的计数 思维题

    Description 小Y最近从同学那里听说了一个十分牛B的高级数据结构——块状树.听说这种数据结构能在sqrt(N)的时间内维护树上的各种信息,十分的高效.当然,无聊的小Y对这种事情毫无兴趣,只是 ...

  10. 【Coursera】Fifth week(3)

    Ethernet 在 PARC(Xerox) 发明. 第一个 Local-Area-Network (LAN 局域网). 把 PCs 连接到 激光打印机上. 在夏威夷大学,被早期的无线网络 Aloha ...