zoukankan      html  css  js  c++  java
  • jquery和css3 淡入淡出效果

    http://www.lxway.com/48542662.htm

    .div {
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s linear 0.5s,opacity 0.5s linear;
    }
     
    .div:hover {
      visibility: visible;
      opacity: 0.5;
      transition-delay: 0s;
    }

    在jquery里,简单调用$('xx').fadeIn();就可完成对element的效果,但是我要求就是使用css3来完成能吗?当然!

    在早之前我们会使用以上的代码来完成fade的效果,可现在不需要这么麻烦了

    div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s linear;
    }

    div:hover {
    visibility: visible;
    opacity: 0.5;
    }

    这样就简单多了,不用了解这么多,就在css里说明要在hover时,给上要的效果,有transition来声明要有过渡就可以了

    细节与原理

    在现代的游览器里,只需给div一个过渡就可以了,在hover时,div:hover也会拥有过渡效果。

    如果你要求在hover时,来停个2秒,在离开时直接完成效果,这也可以

    div {
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s linear;
    }

    div:hover {
    visibility: visible;
    transition:all 0.5s linear 2s;
    }

    当移动点在element上,会直接使用div hover的css,而离开是会使用原本的css。如果hover没有过渡的css,会使用div的过渡css。

  • 相关阅读:
    spring hibernate 调用存储过程
    Mybatis mapper配置
    流量红包算法
    带搜索的下拉框Chosen
    生成二维码
    Linux netlink机制
    OpenFlow Switch学习笔记(七)——Matching Fields
    Hierarchical Token Bucket
    OpenvSwitch架构
    Examining Open vSwitch Traffic Patterns
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/9834885.html
Copyright © 2011-2022 走看看