transition

皇榜展开动效

HTML

<p>鼠标移入下方</p>
<div>
  <h1>奉天承运，皇帝诏曰</h1>
  <h2>恕我直言，在座各位都是^_^</h2>
</div>

CSS

p {
    text-align: center;
  }
  div {
    /* background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); */
    width: 10px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    color: rgba(0, 0, 0, 0);
    background-color: #f35626;
    background-clip: text;
    /* -webkit-text-fill-color:transparent; */
  }
  
  div:hover {
    height: 300px;
    width: 600px;
    text-align: center;
    background-color: wheat;
    color: rgb(66, 66, 66);
    /* transition: 2s height ease, 2s background-color linear, 2s 2s width ease-in, 4s 4s color; */
    /** 只对block级元素生效 */
    /** 动画持续时长 */
    transition-duration: 2s,2s,2s,4s;
    /** 动画渐变的属性 */
    transition-property: height, background-color, width, color;
    /** 延迟播放动画 */
    transition-delay: 0s,0s,2s,4s;
    /** 动画过渡函数 */
    transition-timing-function: ease,linear,ease-in,normal;
  }