悬停背景图像上的“Ken Burns效果”？

我有一个父级div有30％的宽度和100％的高度与背景图像设置为覆盖。悬停背景图像上的“Ken Burns效果”？

我想要什么，当我悬停在这个div，我想创建一个“Ken Burns effect”的背景...

目前，这是我的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; 
}

任何想法或者任何人都可以将我指向正确的方向，这将是伟大的。

来源

2016-05-12 Dan Jenkins

什么是“肯伯恩斯”效应？ – Renan

https://www.kirupa.com/html5/ken_burns_effect_css.htm这是一个流行的动画效果的图像..它非常酷，我只是很难将其应用到我的下面的代码作为其背景图像：/ Dan –

您可以为背景来源设置动画效果 –

这里是你在找什么：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; }

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

来源

2016-05-12 16:50:08 Cutter

如果你想保持background-size: cover，你会不会能够为背景图像的大小设置动画。在某些情况下，您可以将其切换为background-size: 100%以使其动起来：see this fiddle。

效果是有点紧张 - 但我建议包装.col1和动画变换的规模，而不是像this fiddle。您将不得不在悬停状态下使用background-position属性来实现平移效果，但这样看起来更平滑。

来源

2016-05-12 16:53:46 sander

悬停背景图像上的“Ken Burns效果”？

回答

相关问题