纯 CSS 轮播图

闲来无事,按照网上类似的教程折腾了一个纯 CSS 的轮播图,体验了一下 CSS3 强大的动画功能。之前试了几个方法,但都不能配合博客主题实现响应式缩放就放弃了,这个方法巧妙地将图片作为列表的背景图片,实现了响应式以及自动轮播的目的。

https://xikuang.ren/assets/img/20190824222236.jpg?imageslim

一、布局

 <section class="slider-contaner">
            <ul class="slider">
                <li class="slider-item slider-item1"></li>
                <li class="slider-item slider-item2"></li>
                <li class="slider-item slider-item3"></li>
                <li class="slider-item slider-item4"></li>
                <li class="slider-item slider-item5"></li>
                <li class="slider-item slider-item6"></li>
            </ul>
            <div class="focus-container">
                <ul class="floatfix">
                    <li><div class="focus-item focus-item1"></div></li>
                    <li><div class="focus-item focus-item2"></div></li>
                    <li><div class="focus-item focus-item3"></div></li>
                    <li><div class="focus-item focus-item4"></div></li>
                    <li><div class="focus-item focus-item5"></div></li>
                    <li><div class="focus-item focus-item6"></div></li>
                </ul>
            </div>
        </section>

二、CSS 及动画

/*slider start*/.slider-contaner {    width: 100%;    position: relative;}.slider-item + .slider-item {    opacity: 0;    border-radius: 6px;}.slider-item {    width: 100%;    position: absolute;    animation-timing-function: linear;    animation-name: fade;    animation-iteration-count: infinite;    background-size: 100%;}.focus-container {    position: absolute;    z-index: 2;    margin: 0 auto;    left: 0;    right: 0;}.focus-container li {    width: 10px;    height: 10px;    border-radius: 50%;    float: left;    margin-right: 10px;    background: #fff;}.focus-item {    width: 100%;    height: 100%;    border-radius: inherit;    animation-timing-function: linear;    animation-name: fade;    animation-iteration-count: infinite;}.focus-item2, .focus-item3, .focus-item4, .focus-item5, .focus-item6 {    opacity: 0;}.focus-container ul {    margin-left: 46%;}/*设置轮播焦点的位置*/.focus-container {    bottom: 5%;}/*设置当前图片焦点的颜色*/.focus-item {    background: #51B1D9;}/*设置动画,请根据实际需要修改秒数,第一幅图不需要淡入的效果,可以设置-1秒跳过*/.slider-item, .focus-item {    animation-duration: 24s;}.slider-item1, .focus-item1 {    animation-delay: -1s;}.slider-item2, .focus-item2 {    animation-delay: 3s;}.slider-item3, .focus-item3 {    animation-delay: 7s;}.slider-item4, .focus-item4 {    animation-delay: 11s;}.slider-item5, .focus-item5 {    animation-delay: 15s;}.slider-item6, .focus-item6 {    animation-delay: 19s;}/*设置动画关键帧,动画共计24秒,6附图每幅停留3秒(12.5%),淡出1秒(4.57%)*/@keyframes fade {    0% {        opacity: 0;        z-index: 2;    }    4.57% {        opacity: 1;        z-index: 1;    }    17.07% {        opacity: 1;        z-index: 1;    }    21.63% {        opacity: 0;        z-index: 0;    }    100% {        opacity: 0;        z-index: 0;    }}/*设置背景,响应式请利用媒体查询根据断点修改路径*/.slider-item1 {    background-image: url(https://xikuang.ren/zy/img/cat/1.jpeg?imageslim);    background-repeat: no-repeat;}.slider-item2 {    background-image: url(https://xikuang.ren/zy/img/cat/2.jpeg?imageslim);    background-repeat: no-repeat;}.slider-item3 {    background-image: url(https://xikuang.ren/zy/img/cat/3.jpeg?imageslim);    background-repeat: no-repeat;}.slider-item4 {    background-image: url(https://xikuang.ren/zy/img/cat/4.jpeg?imageslim);    background-repeat: no-repeat;}.slider-item5 {    background-image: url(https://xikuang.ren/zy/img/cat/5.jpeg?imageslim);    background-repeat: no-repeat;}.slider-item6 {    background-image: url(https://xikuang.ren/zy/img/cat/6.jpeg?imageslim);    background-repeat: no-repeat;}/*设置图片的高度,请根据具体需要修改百分比(图片高/宽的百分比值),响应式及时修改此值*/.slider, .slider-item {    padding-bottom: 39.47%;}

三、总结

不可置疑的是 CSS3 动画的出现在一定程度上降低了动画效果的实现难度,利于前端的学习,其精简的代码量把我们从烦人的 JS 调试中解放出来,但是相比 JS 它还是有一定的局限性的。

  • 由于 CSS 功能的限制,轮播图只能在自动轮播与点击轮换两个功能选其一实现;
  • CSS3 部分属性不能完全兼容各大浏览器,特别是IE6、7、8所兼容。