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

  • 相关阅读:
    #跟着教程学# 6、maya/python window命令
    element 中MessageBox的封装
    vue中XLSX解析excel文件
    git工作区-暂存区
    GIT相关
    弹窗-二维码生成与下载
    输入框限定100个汉字或200字符
    深浅拷贝(详细)
    日期选择器选取时间范围(非空以及初始时间不能在当天以前)
    多选
  • 原文地址:https://www.cnblogs.com/mc67/p/5242613.html
Copyright © 2011-2022 走看看