悬停背景图像上的“肯·伯恩斯效应”？

Question

我有一个父div，它有30%的宽度和100%的高度，背景图像设置为覆盖。

我想要的是，当我在这个div上盘旋时，我想在背景上创建一个"肯·伯恩斯效应“.

目前，这是我的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%以使其动画化：看这把小提琴。

不过，效果有点紧张--我建议把.col1包装起来，用动画化变换的比例，就像在这把小提琴里一样。为了达到摇摄效果，您必须在悬停状态下使用background-position属性，但这样看起来要平滑得多。