主页 / 问题 / 1319320
Accepted
Muriam
Asked:2022-08-19 22:13:41 +0000 UTC2022-08-19 22:13:41 +0000 UTC

如何使用动画和关键帧制作滑块？HTML 和 CSS

  • 772

8张图片的滑块。需要每张图片自动静止 3 秒并滚动浏览 2 秒。等8次。这里需要
正确编写@keyframes滑块代码，但是不知道怎么正确。

<div id="slider">
    <figure>
        <img src="static/1.jpg">
        <img src="static/2.jpg">
        <img src="static/3.jpg">
        <img src="static/4.jpg">
        <img src="static/5.jpg">
        <img src="static/6.jpg">
        <img src="static/7.jpg">
        <img src="static/8.jpg">
    </figure>
</div>

#slider{
    overflow: hidden;
    width: 800px;
    height: 500px;
    border: 2px solid rebeccapurple;
    margin: 0 auto;
}

#slider figure{
    position: relative;
    width: 800%;
    margin: 0;
    left: 0;
    animation: 40s slider infinite;
}

#slider figure img{
    float: left;
    width: 20%;
}

@keyframes slider{
    0% { left: 0; }
    20% { left: 0; }
    33.3% { left: -100%; }
    53.3% { left: -100%; }
    66.6% { left: -200%; }
    86.6% { left: -200%; }
    66.6% { left: -300%; }
    79.9% { left: -300%; }
    100% { left: 0; }
}
html

1 个回答

  1. Best Answer

    发生了。图片静止 3 秒，2 秒后翻页。

    3 / 40 x 100 = 7.5

    2 / 40 x 100 = 5

    0% + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 + 7.5 + 5 = 100%

    将两个 CSS 选择器更改为以下内容：

    #slider figure img
{
    float: left;
    width: 800px;
}

@keyframes slider
{
    0% { left: 0; }
    7.5% { left: 0; }
    12.5% { left: -100%; }
    20% { left: -100%; }
    25% { left: -200%; }
    32.5% { left: -200%; }
    37.5% { left: -300%; }
    45% { left: -300%; }
    50% { left: -400%; }
    57.5% { left: -400%; }
    62.5% { left: -500%; }
    70% { left: -500%; }
    75% { left: -600%; }
    82.5% { left: -600%; }
    87.5% { left: -700%; }
    95% { left: -700%; }
    100% { left: 0; }
}
    • 1

相关问题