zoukankan      html  css  js  c++  java
  • css过渡效果展示

    <style type="text/css">
    
    .content_list li{
        width: 330px;
        height: 160px;
        background-color: #FF6440;
        position: relative;
        float: left;
    
        margin-right: 24px;
        overflow: hidden;
    }
    ul:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }    
    
    .content_list li .mask {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: #000;
        opacity: 0;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .content_list li:hover .mask {
        opacity: .4;
    }
    </style>
    
    <div>
        <ul class="content_list">
        <li>
           <span>opacity不透明度与transition过度的使用案例</span>
          <div class="mask"></div>
        </li>
      </ul>
    </div>

    效果:

    • opacity不透明度与transition过度的使用案例
       
  • 相关阅读:
    008 WEBmvc的自动配置
    007 springboot的日志问题
    006 自动配置
    005 profile
    004 引入spring的xml配置文件
    003 场景启动器
    002 依赖管理
    001-属性文件
    TypeError: FileBox.fromUrl is not a function
    npm 的是报错 @XXXXX postinstall 处理
  • 原文地址:https://www.cnblogs.com/lichihua/p/13454577.html
Copyright © 2011-2022 走看看