懸停背景圖像上的「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效果」？

回答

相關問題