css3+html5特效-向上滑动
css+html5特效-向上滑动
效果描述：切换的下拉和上拉状态
⿏标悬浮：下拉⿏标离开：上拉html特效代码银河系下载
  /*外容器设置*/
  .box1{position:relative;top:100px;left:100px;width:200px;height:200px;border:1px solid #ccc;overflow:hidden;}
  /*内容器*/
  .border1{position:absolute;top:-100%;left:0;width:100%;height:200%;transform:translateY(0px);transition:1s all ease;}  .front1,.back1,.three{width:100%;height:50%;}
  .front1{background:#ff0000;}
  .back1{background:#00ff00;}
  .box1:hover .border1{transform:translateY(50%);/*transform:translateY(-50%);*/transition:1s all linear;}
  <div class="box1">
  <!--外容器-->
    <div class="border1">
    <!--内容器-->
      <div class="back1"></div>
      <div class="front1"></div>
      <div class="three"></div>
    </div>
  </div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。