zoukankan      html  css  js  c++  java
  • CSS3 过渡

    CSS3 过渡(transition)

    transition:过渡,就是由一种状逐渐态变成另外一状态!

    兼容性:

    transition:transition-property transition-duration transition-timing-function transition-delay;

    下面我们来解读属性:

    transition-property,可以设置某种属性过渡如:width height background opacity 等等,也可以设置成all 或者 none;

    还可以指定我们的css属性列表;

    transition-duration:过渡在指定的时间内完成;

    transition-timing-function:

    linear:匀速

    ease-in:加速运动

    ease-out:减速运动

    ease-in-out:先加后减

    cubic-bezier:贝塞尔曲线;

    我们先做一个简单的实例(width的transition)

    .demo{
        width:100px;
        height:50px;
        background:green;
        transition:width 2s linear 1s;
        -moz-transition:width 2s linear 1s;
        -webkit-transition:width 2s linear 1s;
        -o-transition:width 2s linear 1s;    
    }
    .demo:hover{
        width:200px;
    }

    多属性的改变;

    .demo{
        width:100px;
        height:50px;
        background:green;
        transition:all 2s linear 1s;
        -moz-transition:all 2s linear 1s;
        -webkit-transition:all 2s linear 1s;
        -o-transition:all 2s linear 1s;    
    }
    .demo:hover{
        width:200px;
        height:200px;
        background:red;
    }

    也可以这么写:(先变width,再变高度,再改变背景色)

    .demo{
        width:100px;
        height:50px;
        background:green;
        transition:width 2s linear ,height 2s linear 2s,background 2s linear 4s;
        -moz-transition:width 2s linear ,height 2s linear 2s,background 2s linear 4s;
        -webkit-transition:width 2s linear ,height 2s linear 2s,background 2s linear 4s;
        -o-transition:width 2s linear ,height 2s linear 2s,background 2s linear 4s;
    }
    .demo:hover{
        width:200px;
        height:200px;
        background:red;
    }

     这里再分享一篇:较好的总结性文章:

    https://isux.tencent.com/css3-transition.html

  • 相关阅读:
    mysql在ubuntu中的操作笔记(详)
    Ubuntu16.04上安装MySQL(详细过程)
    Python全栈开发day7
    Python全栈开发day6
    Python全栈开发day5
    Python内置函数总结
    Python全栈开发day4
    Python 集合方法总结
    Python全栈开发day3
    Web前端之CSS_day3-4
  • 原文地址:https://www.cnblogs.com/mc67/p/5242613.html
Copyright © 2011-2022 走看看