核心科技

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>

        <li></li>

    </ol>

</div>

基本的css样式也是一样的

      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;