Question

我有一个父级div，宽度为30％，高度为100％，背景图片设置为覆盖。

我想要的是，当我将鼠标悬停在这个div上时，我想创建一个＆＃34; Ken Burns effect＆＃34;在背景上......

目前这是我的CSS代码：

.col1 {
    margin-left : 20%;
    width : 26.66%;
    float : left;
    height : 100%;
    background : 
        linear-gradient(
            rgba(0, 0, 0, 0.3), 
            rgba(0, 0, 0, 0.3)
        ),
        url(images/rave.jpg);
    background-size : cover;
    background-position : left;
    opacity : 1;
    background-color : black;
}

任何想法或任何人都可以指出我的方向很好。

Answer 1

以下是您正在寻找的内容：http://codepen.io/hkfoster/pen/kechC

<强> CSS

/* Better box-sizing */
* { box-sizing: border-box; }

/* 1rem = 10px */
html { font-size: 62.5%; }

/* Default body */
body { 
  margin: 0; 
  opacity: 0;
  font: 1.6rem/1.875 'Avenir Next', sans-serif;
}

/* Loaded body */
body.loaded {
  opacity: 1;
  transition: 1s opacity;
}

/* Default banner */
.banner {
  position: relative;
  width: 100%;
  height: 40rem;
  padding: 0 5%;
  overflow: hidden;
  backface-visibility: hidden;
}

/* Default image container */
.banner .background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform: translate3d(0,0,0) scale(1.25);
  background: black url(https://dl.dropboxusercontent.com/u/150679257/hazy.jpg) no-repeat center center; 
  background-size: cover;
}

/* Loaded image container */
.loaded .banner .background {
  transform: scale(1);
  transition: 6.5s transform;
}

/* Other stuff */
.banner h1 {
  color: #EEE;
  margin: 0;
  line-height: 40rem;
  text-transform: uppercase;
  text-shadow: 0 0 .3rem black;
}

main { 
  width: 90%;
  margin: 5rem auto;
}

main p { margin: 0 0 3rem 0; }

<强> JS

// Trigger class name on load
window.onload = function() {
  document.body.className += ' loaded'
};

Answer 2

如果您想保留background-size: cover，则无法为背景图片的大小设置动画。在某些情况下，您可以将其切换为background-size: 100%以对其进行动画处理：see this fiddle。

虽然效果有点紧张 - 我建议包装.col1并改变动画缩放比例，就像在this fiddle中一样。您必须在悬停状态下使用background-position属性来实现平移效果，但这样看起来会更加平滑。

＆＃34; Ken Burns效应＆＃34;在悬停背景图像？

2 个答案: