如何解决背景大小的动画变得生涩
我只是想为背景设置动画,但它的移动很奇怪
有人遇到过类似的问题吗?
非常感谢你提前=)
.bkg {
width: 100vw;
height: 600px;
background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
animation: example 3s infinite;
}
@keyframes example {
from {background-size: 100% auto;}
to {background-size: 102% auto;}
}
<body>
<div class="bkg"></div>
</body>
解决方法
这是由于居中。最好考虑一个额外的层和动画 scale()
.bkg {
height: 600px;
position:relative;
overflow:hidden;
}
.bkg:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image: url("https://ilcastellovolante.it/wp-content/uploads/2021/04/IMG_0593-scaled.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
animation: example 3s infinite;
}
@keyframes example {
to {transform:scale(1.02)}
}
<div class="bkg"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。