Question

我想在https://www.360websitedesign.in/的滑块上获得类似的效果，我的图像覆盖整个网页的宽度。我尝试了下面的代码，但没有给出想要的效果。我也在做它在WordPress中，所以如果有一个插件可以帮助解决这个问题。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script>
 window.onload=function(){
 $("#content").fadeOut(4000);
 $("#background").addClass("zoom");
 setTimeout(function(){
 //$("#background").removeClass("zoom");
},5000);
}

</script>
<style>
body{
  margin:0px;
  padding:0px;
  width:100%;
  height:100%;
}
 #background{
   position:absolute;
   top:0px;
   left:0px;
   width:50%;
  height:50%;
  background:url("https://www.360websitedesign.in/wp-content/uploads/2016/03/home-page-banner3.jpg") center center no-repeat;
  background-size: 100% 100%;
  display:inline-block;
  z-index:2;
  transition:all ease 4.1s;
  /* transform:scale(1,1);*/
}
#content{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:3;
  background-color:rgba(0,0,0,0.5);
  color:#ffffff;
   font-size:50px;
 }
 .zoom{
   transform: translate3d(200px, 200px, 0px);
 }
 </style>
  <div id="background">    
  </div>
  <div id="content">
  <center><br /><br /><br /><br /><br /><br />
      Watching...
   </center>
  </div>

Answer 1

Check this basic fiddle here

Another fiddle using img tag

您可以使用CSS3实现 Ken Burns 效果，如下所示，

您的基本CSS （您可以根据您的要求和浏览器而有所不同），

#background{
    animation: kenburns 10s infinite;
}

@keyframes kenburns {
    0% {
        opacity: 0;
    }
    5% {
       opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
   100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
   }
}

Updated fiddle for full width background

Zoom in to zoom out effect

我如何获得transform3d效果

1 个答案: