如何使用 css 為身體的背景圖像設置動畫
[英]How can I animate Background Image of body wth css
問題描述
下面是我的css動畫（實際上是從 Animista 復制的）
@-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } @keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } body { background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; background-position: center; color: white; font-family: "Open Sans", sans-serif !important; }
<body></body>
我需要將此應用於身體背景圖像
body {
background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
background-size: cover;
background-position: center;
color: white;
font-family: "Open Sans", sans-serif !important;
}
當我嘗試應用動畫時，除了背景圖像之外，身體內部的所有內容都在移動，請在這里幫助我，我對這些都不熟悉。
2 個解決方案
解決方案1
1 2020-09-22 06:08:51
問題：您不僅要更改背景，還要更改元素大小。 無論你做什么，改變身體的大小在網站上都是一個非常糟糕的主意。
所以我給你兩個解決方案，第二個看起來不會那么順利，但遺憾的是
所以這是解決您問題的一個示例，我只是讓動畫永遠來回循環，以便您可以更好地看到它。 代碼段：通過將一個 div 設置為背景並將另一個 div 設置為內容區域的解決方法：
@-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16%; } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top; } } body { width: 100vw; height: 100vh; background-color: red; color: white; font-family: "Open Sans", sans-serif !important; } /*Just the background-image*/ .content-background { position: absolute; z-index: -1; width: 100%; height: 100%; background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; background-position: center; animation-name: kenburns-top; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: alternate-reverse; } /*The div where the real content is in*/ .content { width: 100%; height: 100%; /*color and opacity just to make it visible to better explain*/ opacity: 0.2; background-color: blue; }
<body> <div class="content-background"> </div> <div class="content"> <h1>As you can see now only the image changes, body and content stay</h1> </div> </body>
@-webkit-keyframes kenburns-top { 0% { /*manipulate background-size with the animation isntead*/ background-size: 50% 50%; } 100% { background-size: 100% 100%; } } body { width: 100vw; height: 100vh; background-color: red; color: white; font-family: "Open Sans", sans-serif !important; background: url(https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-position: center; /*removed background-size*/ /*add no-repeat rule*/ background-repeat: no-repeat; animation-name: kenburns-top; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: alternate-reverse; } /*The div where the real content is in*/ .content { width: 100%; height: 100%; /*color and opacity just to make it visible to better explain*/ opacity: 0.2; background-color: blue; }
<body> <div class="content"> <h1>As you can see now only the image changes,content stays</h1> </div> </body>解決方案2
1 已采納 2020-09-22 06:18:42
據我所知，您無法向背景圖像添加動畫。 您必須模擬背景圖像的工作方式，然后將動畫添加到該圖像。 我使用 CSS 定位來實現這一點。 我沒有完全添加您的動畫，但您可以隨意添加。
CSS :
body {
color: white;
font-family: 'Open Sans', sans-serif !important;
}
#bg-image {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: auto;
z-index: -10;
animation-name: kenburns-top;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
和body 標簽將是這樣的：
<body>
<img
id="bg-image"
src="https://images.pexels.com/photos/934062/pexels-photo-934062.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
/>
<h1>Web Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eligendi
cupiditate non? Voluptas, in, deserunt quis expedita, laudantium suscipit
ab sint amet quia dolorum illum saepe. Placeat libero enim dicta!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium iure
veritatis eligendi ipsa ad suscipit, quo illum ut rem incidunt eos rerum
iusto repellendus voluptatibus saepe veniam ullam, quod vel?
</p>
</body>
如何在 css 中平滑懸停時為背景圖像大小設置動畫？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.