style #Rightimagewall animation Rightimagewall 40s steps1 infiniteanimation hi-board-ani 1 4000ms ease; background-repeat no-repeat; background-position center center; background-size 100 100;
在给定的代码中,你定义了一个名为Rightimagewall的元素,并给它添加了两个动画:Rightimagewall和hi-board-ani。然而,你的代码中有一个错误,即你在animation属性中多次定义了动画,导致只有最后一个动画生效。
为了修复这个问题,你需要将两个动画合并为一个动画。以下是修复后的代码:
<style>
#Rightimagewall {
animation: Rightimagewall 40s steps(1) infinite;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
width: 360px;
height: 480px;
}
@keyframes Rightimagewall {
0% {
background-image: url(image/mmexport1694175014979.jpg);
}
25% {
background-image: url(image/mmexport1694175019289.jpg);
}
50% {
background-image: url(image/mmexport1694232387752.jpg);
}
75% {
background-image: url(image/mmexport1694232391976.jpg);
}
}
</style>
在修复后的代码中,我们将两个动画合并为一个动画,并将动画属性应用于Rightimagewall元素。此外,我们还将宽度和高度属性添加到Rightimagewall元素中,以确保图片的显示区域。
现在,你应该能够在Rightimagewall元素上看到图片动画和切换动画同时生效了。
原文地址: https://www.cveoy.top/t/topic/i2IR 著作权归作者所有。请勿转载和采集!