[英]Zoom Background Image with CSS or JavaScript
我想随时间缩放div的背景图像,以使其看起来像在放大和缩小(而无需将鼠标悬停在上面-我只是在寻找动画自动开始)。 但是,无论我如何尝试,背景动画都显得不连贯。
如果将div设置为可缩放,则过渡是平滑的,但它将缩放整个div,而不仅仅是背景图像。 有关其他信息,我正在运行最新版本的Chrome,并且已在Windows和OS上进行了尝试。 您可以在此处查看示例: https : //jsfiddle.net/sdqv19a0/
<div class="site-main-banner">
<div class="caption">
<!-- Bootstrap -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- figure -->
<figure> <img src="images/signature.png" alt="signature"> </figure>
<!-- H1 Heading -->
<h1 class="typewrite" data-period="2000" data-type='[ "Purposeful design", "Data-driven marketing", "Dynamic branding", "I love it all." ]'> <span class="wrap"></span> </h1>
<!-- H2 Heading -->
<h2>graphic designer • web designer • analytical marketer</h2>
<div class="clearfix"> </div>
<!-- Button -->
<a href="#" class="theme-btn">view my portfolio</a>
</div>
</div>
</div>
</div>
CSS:
.site-main-banner {
float:left;
width:100%;
background:url(https://preview.ibb.co/m8kxST/static_banner_new.jpg) no-repeat center center;
background-attachment:fixed;
background-size:cover;
margin: 0;
padding: 0;
display: block;
clear: both;
position: relative;
text-align:center;
overflow: hidden;
animation: shrink 5s infinite alternate steps(60);
}
@keyframes shrink {
0% {
background-size: 110% 110%;
}
100% {
background-size: 100% 100%;
}
}
.site-main-banner a.theme-btn {
color: #FFFFFF;
border:#FFFFFF solid 1px;
background:none;
box-shadow:none;
}
.site-main-banner a.theme-btn:hover {
color: #bc6ca7;
border:#FFFFFF solid 1px;
background:#FFFFFF;
box-shadow:none;
}
.site-main-banner .caption {
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%);
padding:300px 0;
}
.site-main-banner figure {
float:left;
width:100%;
text-align:center;
padding:0 0 15px 0;
}
有什么建议吗? 我也对js解决方案持开放态度,只是对JavaScript不太满意。 谢谢!
将背景分成主要横幅后面的自己的元素,这样您就可以应用关键帧动画来分别改变背景的比例。
body, html { margin: 0; padding: 0; } .site-space-background { position: fixed; height: 100%; width: 100%; background: #1A1939 no-repeat center center; background-image: url(https://preview.ibb.co/m8kxST/static_banner_new.jpg); background-attachment: fixed; background-size: cover; animation: shrink 5s infinite alternate steps(60); } @keyframes shrink { 0% { transform: scale(1.2) } 100% { transform: scale(1.0) } }
<div class="site-space-background"></div> <div class="site-main-banner"> <!-- The rest --> </div>
我将css transform
属性与伪元素结合使用。
.site-main-banner {
position: relative;
overflow: hidden;
}
.site-main-banner:after {
content: “”;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-image: url(...);
// put your animation here
}
我目前无法真正发送完整的示例,因为我目前正在地铁里打电话,但希望您能想到。
尝试使用以下transform: scale([values]);
在您的动画中。 使用transform
元素非常适合应用比例动画。 看看这个Jsfiddle 。 我调整了您的一些代码(由于我只编辑了CSS动画,所以没有那么多)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.