美文网首页
transition小案例

transition小案例

作者: AnnQi | 来源:发表于2017-09-01 09:48 被阅读0次
    例子
    <ul>
           <li>
                 <p>精选大棚正宗太空椒1.5kg</p>
                 <span>商城价:<a href="#">15.00元</a></span>
                 <div class="up">加入购物车</div>
            </li>
    </ul>
    
    实现代码
    *{padding: 0;margin: 0;}
    li{
       position:relative;
       overflow: hidden;
       width: 300px;
    }
     .up{
       position: absolute;
       width:100%;
       line-height: 40px;
       height:0;
       bottom:0px;
       color:white;
       opacity: 0.8;
       transition: all 0.5s;
    }
    
    li:hover .up{
       height: 40px;
       background-color: #92DF36;
       width:100%;
      transform: translate(0,0);
     
    }
    

    相关文章

      网友评论

          本文标题:transition小案例

          本文链接:https://www.haomeiwen.com/subject/lwehjxtx.html