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

  • 相关阅读:
    上市前为什么要分红
    在文件开始追加一行
    c++ 日期时间工具
    windows c++找不到time.h sys/types.h
    截取ls -l的某一列
    提取指定类型文件到指定目录,保留目录结构
    批量转换当前目录下的文件名为snake case
    vcpkg boost uuid Bcrypt 链接问题
    文件名pascal转underscore
    vcpkg cmake 找不到boost
  • 原文地址:https://www.cnblogs.com/mc67/p/5242613.html
Copyright © 2011-2022 走看看