zoukankan      html  css  js  c++  java
  • C​S​S3​:​transition与visibility

    一、transition与visibility

    transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition- duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition- delay。下面分别来看这四个属性值

    transition-property:

    其中有个属性,visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”,如:visibility,于是,visibility应用transition等同于0~1之间的过渡效果。

    (1)延时隐藏:

    .image
    {
      -webkit-transition:all 0.5s ease;
       -moz-transition:all 0.5s ease;
       -o-transition:all 0.5s ease;
       -ms-transition:all 0.5s ease;
      transition:all 0.5s ease;
       position:absolute;
       margin-top:20px;
       visibility:hidden;

    }
    .hover:hover .image{visibility:visible;}

     

    (2)延时显示:

     .image-delay{   

       position:absolute;    
       margin-top:20px;   
       visibility:hidden; -webkit-transition-delay:0s; -moz-transition-delay:0s; -ms-transition-delay:0s; -o-transition-delay:0s; transition-delay:0s; } .hover-delay:hover .image-delay{ visibility:visible; -webkit-transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s; }


    (3)淡入淡出效果:
    .image-fadeout
    { 
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -ms-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    position:absolute;
    margin-top:20px;
    visibility:hidden;
    opacity:0;
    } 
    .hover-fadeout:hover .image-fadeout{ visibility:visible; opacity:1; }
     
  • 相关阅读:
    OpenJ_Bailian
    Codeforces Global Round 2: D.Frets On Fire
    Gym 102035 NWU2019组队赛2.0
    Gym 102035H :Zuhair and the Dag
    Gym 102035E:New Max
    Gym
    Linux常用命令-总结
    Linux常用命令
    Linux常用命令
    分布式会话 拦截器 单点登录
  • 原文地址:https://www.cnblogs.com/christal/p/3892117.html
Copyright © 2011-2022 走看看