Fork me on GitHub
首页 > 网页代码 > css3悬停开门动画特效 - 可设置为图片效果相当漂亮

css3悬停开门动画特效 - 可设置为图片效果相当漂亮

css3悬停开门动画特效
超棒 代码如下: 





  <style type="text/css">
    .door {
      position: fixed;
          top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #D7C9C9 url(/resources/web/default/assets/images/kmbj.jpg) center top no-repeat;
       z-index: 99999; 
    }

    .door:before,
    .door:after {
      -content: '';
      position: absolute;
      left: 0;
      width: 0;
      height: 0;
      overflow: hidden;
      z-index: 2;
      transition: all .8s ease;
    }

    .door:before {
      top: 0;
    }

    .door:after {
      bottom: 0;
      border-color: transparent transparent #000 transparent;
    }

    .door-left,
    .door-right {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      transition: all .5s ease;
    }

    .door-left {
      border-right: 2px solid #000;
      -webkit-transform-origin: 0 0;
        background-image: url("https://4t.cm/update/url/1603668533.gif");
         background-repeat: no-repeat;
         background-size: 100% 100%;
    }

    .door-left:before,
    .door-right:before {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      top: 50%;
      margin-top: -5px;
      border-radius: 50%;
      background: #6CC9C9;
    }

    .door-left:before {
      right: 5px;
    }

    .door-right:before {
      left: 5px;
    }

    .door-right {
      border-left: 2px solid #000;
      -webkit-transform-origin: 100% 0;
        background-image: url("https://4t.cm/update/url/1603701051.gif");
          background-repeat: no-repeat;
            background-size: 100% 100%;
    }
  </style>

<div class="door">
    <div class="door-left"></div>
    <div class="door-right"></div>
  </div>
  
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  <script type="text/javascript">
    $(".door-left").css({
      'transition': 'transform 3s Linear',
      'transform': 'rotateY(90deg)'
    })
    $(".door-right").css({
      'transition': 'transform 3s Linear',
      'transform': 'rotateY(90deg)'
    })

    setTimeout(function () { $(".door").css('display','none') }, 3000);
  </script>




演示效果:

https://93nt.com


可设置为图片效果相当漂亮  

打开门的速度可设置   快 或者   慢   3s 3000 相对于  

数字越大 打开速度越慢  反之  数字越小越快  
Fork me on GitHub

上一篇: DJ秀 - 潮妹 - gamgam (DJ版)

下一篇: Linux系统宝塔安装教程


Title - Artist
0:00