背景动画不起作用（CSS、SCSS）
[英]Background animation doesn't work (CSS, SCSS)
问题描述
I would like my background to appear slowly and gradually and I thought it would be fairly easy but I can't.
我希望我的背景慢慢地、逐渐地出现，我认为这会很容易，但我不能。 Any suggestions?有什么建议？ Can I only do it with html, CSS and SCSS (not a proficient user of the latter yet).我只能用 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
first of all, your keyframes definition has to be outside of your body styling.首先，你的keyframes定义必须在你的body造型之外。 Then, it's not possible in this case, to use opacity for background-image transparency, take a look at a opacity documentation .然后，在这种情况下不可能使用opacity来实现background-image透明度，请查看不透明度文档。
But you could set the transparent effect for a ::after element, and animate this.但是您可以为::after元素设置透明效果，并为其设置动画。
You could do it this way:你可以这样做：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.