任何想法如何解决快速动画背景图片

Posted 2023-03-06

【中文标题】任何想法如何解决快速动画背景图片

【英文标题】：Any idea how to solve fast animating background picture

【发布时间】：2022-01-04 21:36:27

【问题描述】：

这是我用于动画背景的 css 代码，但它太快了，一切都在几秒钟内发生。请有人帮我解决这个问题。 我是新来的

    .one 
animation: changeBg 1s infinite; 
width:100%; 
height:450px; 

    @keyframes changeBg
     0%,100%  background-image: url("../project1/img/hero1.jpg");
    
    25% 
       background-image: url("../project1/img/hero2.jpg");
     
    50% 
       background-image: url("../project1/img/hero3.jpg");
     
    75% 
        background-image: url("../project1/img/hero4.jpg");
     

【参考方案1】：

.one 
  animation: changeBg 3s infinite; 
  width:100%; /*      ^^^^ */
  height:450px; 

将 1s 更改为您想要的任何持续时间

可以是秒 (s) 或毫秒 (ms) W3 Schools: animation-duration

【讨论】：

哦，错过了。非常感谢?

【参考方案2】：

animation: changeBg 1s infinite; 中的 1s 是您的时机。您可以增加它，另外您可以添加动画计时功能，如ease、linear...等

【讨论】：

我如何添加线性函数导致它真的很慢？

你可以做animation: changeBg 5s infinite linear;或者像这样添加它自己...animation-timing-function: linear;。 developer.mozilla.org/en-US/docs/Web/CSS/…