Stido 2017-10-23 12:37 采纳率: 0%
浏览 1510

CSS3过渡动画导致图片显示不正常

如题，想制作一个贺年页面。但是过渡动画进行时图片显示不正常。还请各位大牛帮忙指点图片说明箭头指出的地方即使图片显示错误的地方图片说明另外附上代码：
html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




Happy new year!



恭贺新禧

  新年、新事、新开始、新起点、一定会有新的收获，祝愿各位事事如意，岁岁平安，年年有今日，岁岁有今朝。
                --阡陌 旧时光



很抱歉，音乐播放功能不支持IE9以下版本的浏览器（如果你能看到这行字说明你的浏览器就是IE9以下的版本......）




CSS代码：
@charset "utf-8";
/* CSS Document */

#main{
height :800px;
width :100%;
background :url(../image/bg3.jpg);
background-size: cover;
background-position: center;
animation: back 30s linear;
animation-fill-mode :forwards
}

#test{
width :400px;
height :100px;
float :left;
margin-top :100px;
margin-left :50px;
color :#FFF;
font-size :100px;
line-height :100px;
text-align :center;
}

#test-left{
width :390px;
height :280px;
float :left;
margin-top :230px;
font-size :25px;
color :#FFF;
animation: move1 3s ease-out .2s;

}

@keyframes move{
0%{
margin-left :0;
}
100%{
margin-left :50px;
}
}

@keyframes move1{
0%{
margin-top :300px;
}100%{
margin-top :230px;
}
}

@keyframes text{
0%{
opacity :1;
}100%{
opacity :0;
}
}

@keyframes back{
0%{
background :url(../image/bg.jpg);
}50%{
background :url(../image/bg2.jpg);
}100%{
background :url(../image/bg3.jpg);
}
}

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-07 02:07
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    在CSS中，animation 和 animation-fill-mode 属性用于控制动画何时结束以及如何从当前状态转换到下一个状态。

    1. 动画何时结束:

      • animation-duration: 定义动画持续的时间。
      • animation-timing-function: 定义动画速度曲线。
      • animation-direction: 控制动画是否反向播放。

    2. 如何从当前状态转换到下一个状态:

      • animation-delay: 设置延迟时间。
      • animation-iteration-count: 定义重复次数。
      • animation-play-state: 切换动画状态。

    在您的例子中，您有一个名为“back”的动画，并且希望它在背景图像改变时从“bg3”切换到“bg.jpg”。您可以使用以下代码来实现这个效果：

    #main {
    height :800px;
    width :100%;
    background :url('../image/bg3.jpg');
    background-size: cover;
    background-position: center;
    animation: back 30s linear;
    animation-fill-mode :forwards
}

#test {
    width :400px;
    height :100px;
    float :left;
    margin-top :100px;
    margin-left :50px;
    color :#FFF;
    font-size :100px;
    line-height :100px;
    text-align :center;
}

#test-left {
    width :390px;
    height :280px;
    float :left;
    margin-top :230px;
    font-size :25px;
    color :#FFF;
    animation: move1 3s ease-out .2s;
}

    在这个例子中，我添加了一个名为“move1”的动画，它将文本水平居中并从顶部向下移动。然后，我为背景图像设置了“back”动画，以确保当背景图像从“bg3”切换到“bg.jpg”时，动画会从当前位置开始执行。

    这样，当你滚动网页查看不同部分时，你可能会看到不同的背景图像和文字。

    评论

报告相同问题？