zoukankan      html  css  js  c++  java
  • 过渡课堂笔记

    过渡

    一,什么是过渡(transition)?

        1,transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。

        2,可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变 CSS 的属性值。

    二,常用属性;

        1,transition 属性主要包含四个属性值:

          1),用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属 性改 变);all(所有属性改变)这个也是其默认值;indent(元素属性名);当其值为none时,transition马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition效果;

          2),transition-duration -- 定义过渡效果花费的时间,默认是 0;

          3),transition-timing-function -- 允许根据时间的推进去改变属性值的变换速率,

          transition-timing-function有6个可能值:

             a、ease:(逐渐变慢)默认值

             b、linear:(匀速),linear 

             c、ease-in:(加速)

             d、ease-out:(减速),

             e、ease-in-out:(加速然后减速)

             f、cubic-bezier:(该值允许你去自定义一个时间曲线)特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

          4),transition-delay -- 用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,默认是 0。

          5),transition -- 简写属性,用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开。

           如:transition: <property> <duration> <animation type> <delay>如备课文件夹所示:

  • 相关阅读:
    Linux升级内核教程(CentOS7)
    如何更新远程主机上的 Linux 内核
    CentOS在ssh下远程重装系统
    独立服务器远程重装Linux系统
    大公司都有哪些开源项目~~~阿里,百度,腾讯,360,新浪,网易,小米等
    win7旗舰版64位缺失tbb.dll文件
    一文看懂IC芯片生产流程:从设计到制造与封装
    Open WATCOM指南
    eComStation 1.2
    开源网络准入系统(open source Network Access Control system)
  • 原文地址:https://www.cnblogs.com/zhuyiran/p/5666334.html
Copyright © 2011-2022 走看看