Question

我试图创建一个仅限css的滑块，它效果很好。但是，我希望它能自动启动并自动转换。这可能是通过CSS吗？

带有html和css的Codepen：

   <div class="slider"> 
    <input type="radio" id="control1" name="controls" checked="checked"/>
    <label for="control1"></label>
    <input type="radio" id="control2" name="controls"/>
    <label for="control2"></label>
    <input type="radio" id="control3" name="controls"/>
    <label for="control3"></label>
    <input type="radio" id="control4" name="controls"/>
    <label for="control4"></label>
 <div class="sliderinner">
        <ul>
            <li>
                <img src="http://i.imgur.com/aAExlOn.jpg" />

            </li>
            <li>
                <img src="http://i.imgur.com/aAExlOn.jpg" />

            </li>
            <li>
                <img src="http://i.imgur.com/aAExlOn.jpg" />

            </li>
            <li>
                <img src="http://i.imgur.com/aAExlOn.jpg" />

            </li>

        </ul>
    </div>
</div>

Answer 1

终于找到了出路：

@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

.auto{
  position:absolute;
  animation:round 16s infinite;
  opacity:0;
 }

img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:4s;}
img:nth-child(2){animation-delay:8s;}
img:nth-child(1){animation-delay:12s;}

将类auto添加到您的图片并试用。

Let me know if you are looking for something else :)

Answer 2

看看这个：

Live demo

input[type=radio]#control1:checked~.sliderinner>ul { -webkit-animation: test infinite 10s alternate;
  animation: test infinite 10s alternate; }
.slider input[type=radio]#control2:checked~.sliderinner>ul { left: -100% }
.slider input[type=radio]#control3:checked~.sliderinner>ul { left: -200% }
.slider input[type=radio]#control4:checked~.sliderinner>ul { left: -300% }
.slider input[type=radio]#control5:checked~.sliderinner>ul { left: -400% }

@-webkit-keyframes test {
   0% {
      left: 0;
    }

    10% {
      left: -100%;
    }

    30% {
      left: -200%
    }

    90% {
      left: -300%;
    }

    100% {
      left: -400%;
    }
}
@keyframes test {
   0% {
      left: 0;
    }

    10% {
      left: -100%;
    }

    30% {
      left: -200%
    }

    90% {
      left: -300%;
    }

    100% {
      left: -400%;
    }
}

这不完整，但可能更好，这只是使用key frames

的CSS解决方案

你可以效仿我的榜样让它看起来更好，祝你好运

自动启动基于css的滑块？

2 个答案: