下面是我的例子。也许其他人也有同样的问题。例如,我的div
名字.description-container
与主容器一起移动.one-more-container
。
$('div').removeClass('one-more-container');
.one-more-container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.one-more-container .single-featured-background {
transform: scale(1.05);
transition: all 3s;
}
.single-featured-background {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
background-repeat: no-repeat;
background-position: center bottom;
transition: all 3s;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" style="background-image: url('<?php echo $thumb['0'];?>')">
<div class="super-title-container">
<h1 class="super-title"><?php the_title(); ?></h1>
<div class="description-container">
<h2><?php the_field('antraste'); ?></h2>
<p><?php the_field('aprasymas'); ?></p>
</div>
</div>
</div>
您只能为背景创建单独的元素。您只能为该元素设置动画。
setTimeout(function(){
$('div').removeClass('one-more-container');
},3000);
.one-more-container {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.single-featured-background {
position:relative;
height: 100vh;
overflow: hidden;
}
.onlyBg{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
transition: all 3s;
}
.one-more-container .onlyBg {
transform: scale(1.5);
transition: all 3s;
}
.super-title-container{
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-more-container">
<div id="post" class="single-featured-background" >
<div class="onlyBg" style="background-image: url('http://via.placeholder.com/350x150')"></div>
<div class="super-title-container">
<h1 class="super-title">title</h1>
<div class="description-container">
<h2>sub title</h2>
<p>paragraph</p>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句