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; }
     
  • 相关阅读:
    面向对象进阶----->反射 getattr 和hasattr方法
    封装和 property方法
    C/S与B/S区别
    BIO、NIO和AIO
    ArrayList、Vector、LinkedList的区别
    AOP代理模式
    Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以implements(实 现)interface(接口
    Spring常见面试题及答案解析
    数据库优化
    事物的理解
  • 原文地址:https://www.cnblogs.com/christal/p/3892117.html
Copyright © 2011-2022 走看看