Css3動畫無限運行變焦效果

-3

我需要幫助。我想用下面的css3動畫背景圖像是我正在嘗試做的。Css3動畫無限運行變焦效果

它不工作。任何人都可以請指導我缺乏的地方。

div.top { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    background: #000000; 
 
    overflow: hidden; 
 
    height:500px 
 
} 
 

 
div.top:before { 
 
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    opacity: 0.49; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    /*z-index: -1;*/ 
 
    animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    transform: scale(1, 1) translate(0px, 0px); 
 
    -webkit-transform: scale(1, 1) translate(0px, 0px); 
 
    -moz-transform: scale(1, 1) translate(0px, 0px); 
 
\t -o-transform: scale(1, 1) translate(0px, 0px); 
 
}

<div class="top">Animate background image here</div>

感謝。

來源

2016-09-19 Vikas hatwal

哪裏是'zoomEffect'定義？ –

如果您使用「動畫」，則意味着您的代碼中已定義動畫，但您並未共享該動畫。分享你的動畫代碼來幫助你，如果不是這樣的話，它將被視爲不合時宜的。 –

尋求調試幫助的問題（**「爲什麼這個代碼不工作？」**）必須包括**期望的行爲**，特定的問題或錯誤以及**在問題本身中重現它所需的最短代碼**。沒有明確問題陳述的問題對其他讀者無益。請參閱：[如何創建最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 –

您需要定義動畫zoomEffect

@keyframes zoomEffect { 
    from {transform: scale(1, 1)} 
    to {transform: scale(2, 2)} 
}

你可以閱讀更多關於它在這裏：CSS3 Animations

div.top { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    background: #000000; 
 
    overflow: hidden; 
 
    height: 500px 
 
} 
 
div.top:before { 
 
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    opacity: 0.49; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    /*z-index: -1;*/ 
 
    animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
} 
 

 
@keyframes zoomEffect { 
 
    from {transform: scale(1, 1)} 
 
    to {transform: scale(2, 2)} 
 
}

<div class="top">Animate background image here</div>

來源

2016-09-19 11:50:37

Css3動畫無限運行變焦效果

回答

相關問題