android 层叠轮播图框架_纯css实现轮播图

查看最终效果点击这里演示demo
查看源码点击这里GitHub仓库链接

项目背景

传说使用纯css实现轮播图在面试中会有所加分，所以今天我们就来实现一下。

核心科技

css3中的animation方法,可以帮助我们快速实现动画效果.具体使用方法如下.

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

语法

animation: name duration timing-function delay iteration-count direction;

具体详情请见w3c网站css3动画属性

实现思路

常见的两种轮播图分别是左右滑动式和渐变式,下面就简单的说明一下两种实现的思路.

另外还有一种改变背景的操作,这种实现出来的效果与渐变式类似,因为它只是改变背景所以只需要一个元素就可以了,但是轮播图除了展示内容之外还肩负着导航的作用,所以只有一个标签的话且没有js配合的情况下无法插入导航链接,所以这种我觉得不能算一个合格的轮播图.

总体结构

两种方式实现对轮播图的框架结构并不会产生影响,所以两个都采用轮播图的标准结构.

<div class="container">
    <!-- 轮播图结构 -->
    <ul>
        <li><img src="images/1.webp" alt="" /></li>
        <li><img src="./images/2.webp" alt="" /></li>
        <li><img src="./images/3.webp" alt="" /></li>
        <li><img src="./images/4.webp" alt="" /></li>
        <li><img src="images/1.webp" alt="" /></li> <!-- 左右滑动为了实现一种无缝衔接需要在末尾复制一份第一张图片,渐变式不需要这张图可以去掉 -->
    </ul>
    <!-- 轮播焦点结构 -->
    <ol>
        <li></li>
        <li></li>
        <li></li&g