背景動畫不起作用（CSS、SCSS）
[英]Background animation doesn't work (CSS, SCSS)
問題描述
我希望我的背景慢慢地、逐漸地出現，我認為這會很容易，但我不能。 有什么建議？ 我只能用 html、CSS 和 SCSS 來做嗎（還不是后者的熟練用戶）。
body { background-image: url(https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); background-repeat: no-repeat; animation-name: b-anime; animation-delay: 1s; animation-duration: 4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; transition-property: background; @keyframes b-anime { 0% { opacity: 0; } 25% { opacity: 0.25; } 50% { opacity: 0.5; } 75% { opacity: 0.75; } 100% { opacity: 1; } } }
<!DOCTYPE html> <html> <head> <title>icy-blues</title> <link rel="stylesheet" type="text/css" href="website1.css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width> <meta name=" description " content="xx "> <meta name="keywords " content="stuff "> <meta name="author " content="Ray "> </head> <body> </body> </html>
1 個解決方案
解決方案1
2 已采納 2020-03-11 20:37:24
首先，你的keyframes定義必須在你的body造型之外。 然后，在這種情況下不可能使用opacity來實現background-image透明度，請查看不透明度文檔。
但是您可以為::after元素設置透明效果，並為其設置動畫。
你可以這樣做：
body { position: relative; height: 100vh; width: 100vw; padding: 0; margin: 0; } body::after { content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(https://images.pexels.com/photos/1001682/pexels-photo-1001682.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260); background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; opacity: 0; animation-name: b-anime; animation-delay: 1s; animation-duration: 4s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; transition-property: background; } @keyframes b-anime { 0% { opacity: 0; } 25% { opacity: 0.25; } 50% { opacity: 0.5; } 75% { opacity: 0.75; } 100% { opacity: 1; } }
<body></body>
使用SCSS的背景圖片不起作用-`webpackMissingModule`錯誤
[英]Background image with SCSS doesn't work - `webpackMissingModule` error
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.