zoukankan      html  css  js  c++  java
  • 实现鼠标悬浮内容自动撑开的过渡动画

    需要为一个列表添加个动画,容器的高度是不确定的,也就是高度为 auto,悬浮时候撑开内容有个过渡动画。

    用 CSS3 实现的话,由于高度的不确定,而 transtion 是需要具体的树枝,所以设置 height:auto 是无法实现效果的,可以通过 max-height 这个属性间接的实现这么个效果,css 样式是这样的:

    <ul>
      <li>
        <div class="hd"> 列表1 </div>
        <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
      </li>
      <li>
        <div class="hd"> 列表1 </div>
        <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
      </li>
      <li>
        <div class="hd"> 列表1 </div>
        <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
      </li>
    </ul>
    View Code
    .bd {
      max-height:0;
      overflow:hidden;
      transition: all 1s ease-out;
    }
    li:hover .bd {
      max-height: 600px;
      transition-timing-function: ease-in;
    }
    View Code
  • 相关阅读:
    洛谷 P2807 三角形计数
    洛谷 P1727 计算π
    洛谷 P1595 信封问题
    洛谷 P3131 [USACO16JAN]子共七Subsequences Summing to Sevens
    3.1、spark集群运行应用
    移动端自适应
    【Flex布局】
    【pm2】
    【安全】
    【Bower】
  • 原文地址:https://www.cnblogs.com/miny-simp/p/7597645.html
Copyright © 2011-2022 走看看