Animate背景大小:缩放到背景大小:110%
问题描述:
我期待CSS动画背景从大小background-size: cover;
到background-size: 120%
悬停。我不能将背景从100%开始,因为它开始在不同的设备/显示器上垂直重复。但是,在这种情况下,transition:.5s;
会停止任何类型的动画。任何解决方法?Animate背景大小:缩放到背景大小:110%
代码如下所示:
HTML
<div class="desktop-signs">
<div class="image-box">
<div class="col-md-4 block-service" id="block-illustration">
<h2>ILLUSTRATION & ANIMATION</h2>
</div>
</div>
<div class="image-box">
<div class="col-md-4 block-service" id="block-website">
<h2>WEBSITE DEVELOPMENT</h2>
</div>
</div>
<div class="image-box">
<div class="col-md-4 block-service" id="block-game">
<h2>GAME & APP DEVELOPMENT</h2>
</div>
</div>
</div>
CSS
.__hero-container #services .block-service {
height: 800px;
background-image: url('../images/blockillustration.jpg');
background-size: cover;
text-align: center;
color: #fff;
background-position: center;
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.__hero-container #services .block-service:hover {
background-size: 110%;
opacity: 0.8;
cursor: pointer;
}
答
当你意识到你不能从cover
动画为任何其他值。
,你可以用假缩放伪元素的效果:
.block-service {
height: 800px;
color: #fff;
opacity: 1;
position: relative;
overflow: hidden;
}
.block-service:before {
content: "";
background-image: url('http://placehold.it/400x400');
background-size: cover;
background-position: center;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: all .5s ease;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.block-service:hover:before {
transform: scale(1.2);
opacity: 0.8;
cursor: pointer;
}
<div class="desktop-signs">
<div class="image-box">
<div class="col-md-4 block-service" id="block-illustration">
<h2>ILLUSTRATION & ANIMATION</h2>
</div>
</div>
<div class="image-box">
<div class="col-md-4 block-service" id="block-website">
<h2>WEBSITE DEVELOPMENT</h2>
</div>
</div>
<div class="image-box">
<div class="col-md-4 block-service" id="block-game">
<h2>GAME & APP DEVELOPMENT</h2>
</div>
</div>
</div>
过渡添加到:悬停为好,也许? – Kyle
'background-repeat:no-repeat'和'background-size:100%'? – Roberrrt
不幸的是,将转换添加到:hover元素不起作用:( 而我不能使用'background-repeat:no-repeat',因为我得到的图像不重复的黑色边框。大小动态基于浏览器宽度使用Bootstrap! –