Html 我如何制作一个纯css自动滑块，是响应？（无JavaScript）_Html_Css_Slider_Slideshow_Css Animations

Html 我如何制作一个纯css自动滑块，是响应？（无JavaScript）

html css

Html 我如何制作一个纯css自动滑块，是响应？（无JavaScript）,html,css,slider,slideshow,css-animations,Html,Css,Slider,Slideshow,Css Animations,我有一个全功能的自动滑块（图片显示），我从这里改编：但是，它没有响应。在我的例子中，图像周围的div（'mask'、'slider'、'content slider'等）不会随着图像而收缩。图像缩小得很好。我正在寻找一个css解决方案我的想法是（在大量搜索之后）我只是将所有内容转换为百分比而不是像素，但这似乎对我不起作用。例如（根据在线搜索结果改编）325px在style.css和animation.css中是100%，0px是0%，而-325px在style.css和animation.

我有一个全功能的自动滑块（图片显示），我从这里改编：

但是，它没有响应。在我的例子中，图像周围的div（'mask'、'slider'、'content slider'等）不会随着图像而收缩。图像缩小得很好。我正在寻找一个css解决方案

我的想法是（在大量搜索之后）我只是将所有内容转换为百分比而不是像素，但这似乎对我不起作用。例如（根据在线搜索结果改编）325px在style.css和animation.css中是100%，0px是0%，而-325px在style.css和animation.css中是-100%，但如前所述，这不起作用。图像应垂直滑动并淡出（不透明度）

我被难住了

这是我认为您需要的代码

这是我的html：

<html lang="en"><head>

</head>
<body>
<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
            <ul>
            <li id="first" class="firstanimation">
            <a href="#">
            <img class="slider-img" src="images/img_1.jpg" alt="Cougar">
            </a>
            <div class="tooltip">
                <a href="#" class="slider-h1-a">
            <h1><span style="color: red">●</span> xxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
             </a>
            </div>
            </li>

            <li id="second" class="secondanimation">
            <a href="#">
            <img class="slider-img" src="images/img_2.jpg" alt="Lions">
            </a>
            <div class="tooltip">
                <a href="#" class="slider-h1-a">
            <h1><span style="color: red">●</span> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
             </a>
            </div>
            </li>

            <li id="third" class="thirdanimation">
            <a href="#">
            <img class="slider-img" src="images/img_3.jpg" alt="Snowalker">
            </a>
            <div class="tooltip">
                <a href="#" class="slider-h1-a">
            <h1><span style="color: red">●</span> xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
             </a>
            </div>
            </li>

            <li id="fourth" class="fourthanimation">
            <a href="#">
            <img class="slider-img" src="images/img_4.jpg" alt="Howling">
            </a>
            <div class="tooltip">
                <a href="#" class="slider-h1-a">
            <h1><span style="color: red">●</span> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
              </a>
            </div>
            </li>

            <li id="fifth" class="fifthanimation">
            <a href="#">
            <img class="slider-img" src="images/img_5.jpg" alt="Sunbathing">
            </a>
            <div class="tooltip">
            <a href="#" class="slider-h1-a">
            <h1><span style="color: red">●</span>xxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
                </a>
            </div>
            </li>
            </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>


</body></html>

以下是my animation.css（仅用于示例的webkit关键帧）：

我也在寻找答案@登山者，你找到办法了吗？是的，我找到了。我最终在互联网上搜索并整理了这些想法。对不起，我的“解决方案”不值得发布给其他人。祝你好运！好吧，然后我放弃了纯CSS幻灯片（我花了太多时间），我将使用js幻灯片。这是一个真正伟大的，很容易设置！可能重复的

.container {
    margin:0 auto;
    overflow:hidden;
    width: 100%;
}

/* CONTENT SLIDER */
#content-slider {
    width:100%;
    height:100%;
    margin: 0;
}
/* SLIDER */
#slider {
    background: #e5e8ea;
    box-shadow:1px 1px 1px rgba(0,0,0,0.7);
    height: 100%;
    width: 100%;
    margin: 0;
    overflow:visible;
    position:relative;
}
#mask {
    overflow:hidden;
    height:320px;
}
#slider ul {
    margin:0;
    padding:0;
    position:relative;
}
#slider li {
    width:100%;
    height:320px;
    position:absolute;
    top:-325px;
    list-style:none;
}
#slider li.firstanimation {
    -moz-animation:cycle 25s linear infinite;   
    -webkit-animation:cycle 25s linear infinite;    
    animation: cycle 25s linear infinite;   
}
#slider li.secondanimation {
    -moz-animation:cycletwo 25s linear infinite;
    -webkit-animation:cycletwo 25s linear infinite; 
    animation: cycletwo 25s linear infinite;    
}
#slider li.thirdanimation {
    -moz-animation:cyclethree 25s linear infinite;
    -webkit-animation:cyclethree 25s linear infinite;
    animation: cyclethree 25s linear infinite;      
}
#slider li.fourthanimation {
    -moz-animation:cyclefour 25s linear infinite;
    -webkit-animation:cyclefour 25s linear infinite;        
    animation: cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
    -moz-animation:cyclefive 25s linear infinite;
    -webkit-animation:cyclefive 25s linear infinite;    
    animation: cyclefive 25s linear infinite;   
}

@-webkit-keyframes cycle {
    0%  { top:0px; }
    4%  { top:0px; }
    16% { top:0px; opacity:1; z-index:0; } 
    20% { top:325px; opacity:0; z-index:0; }
    21% { top:-325px; opacity:0; z-index:-1; }
    50% { top:-325px; opacity:0; z-index:-1; }
    92% { top:-325px; opacity:0; z-index:0; }
    96% { top:-325px; opacity:0; }
    100%{ top:0px; opacity:1; }

}
@-webkit-keyframes cycletwo {
    0%  { top:-325px; opacity:0; }
    16% { top:-325px; opacity:0; }
    20% { top:0px; opacity:1; }
    24% { top:0px; opacity:1; } 
    36% { top:0px; opacity:1; z-index:0; } 
    40% { top:325px; opacity:0; z-index:0; }
    41% { top:-325px; opacity:0; z-index:-1; }  
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
    0%  { top:-325px; opacity:0; }
    36% { top:-325px; opacity:0; }
    40% { top:0px; opacity:1; }
    44% { top:0px; opacity:1; } 
    56% { top:0px; opacity:1; z-index:0; } 
    60% { top:325px; opacity:0; z-index:0; } 
    61% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
    0%  { top:-325px; opacity:0; }
    56% { top:-325px; opacity:0; }
    60% { top:0px; opacity:1; }
    64% { top:0px; opacity:1; }
    76% { top:0px; opacity:1; z-index:0; }
    80% { top:325px; opacity:0; z-index:0; }
    81% { top:-325px; opacity:0; z-index:-1; }
    100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
    0%  { top:-325px; opacity:0; }
    76% { top:-325px; opacity:0; }
    80% { top:0px; opacity:1; }
    84% { top:0px; opacity:1; }
    96% { top:0px; opacity:1; z-index:0; }
    100%{ top:325px; opacity:0; z-index:0; }
}