利用动画animation制作简易的轮播图

最新推荐文章于 2024-04-27 17:15:07 发布

Laiking-

最新推荐文章于 2024-04-27 17:15:07 发布

阅读量342

点赞数 1

分类专栏：利用动画效果制作轮播图文章标签： css3 html 前端动画

本文链接：https://blog.csdn.net/lzh_yyds/article/details/129355838

版权

利用动画效果制作轮播图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

文章目录
一.动画的制作流程
二.制作步骤
- 1.定义动画
- 可以使用两种方式
- 2.调用动画
推荐先定义再调用动画

一、animation是什么？

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

二、使用步骤

1.定义动画

css动画代码如下（示例）：

  /* 定义动画 */
       @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(-1400px, 0);
            }
        }
  /* 哪个需要执行动画就在元素中添加animation属性 animation: move(动画名称) 3s(动画时间); */

0%为开始转态相对于from,100%是结束转态,相当于to

css修饰代码:

    * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            height: 200px;
            border: 10px solid #000;
            margin: 200px auto;
            overflow: hidden;

        }

        .box:hover ul {
            /* 给轮播图添加鼠标经过停止的效果 */
            animation-play-state: paused;
        }

        .box ul {
            list-style: none;
            width: 2000px;
            /* 调用动画 */
            animation: move 5s infinite linear;
        }

        .box li {
            float: left;


        }

        .box li img {
            width: 200px;
            height: 200px;

        }

2.html代码

代码如下（示例）：

<body>
    <div class="box">
        <ul>
            <li><img src="./imges/images/1.jpg" alt=""></li>
            <li><img src="./imges/images/2.jpg" alt=""></li>
            <li><img src="./imges/images/3.jpg" alt=""></li>
            <li><img src="./imges/images/4.jpg" alt=""></li>
            <li><img src="./imges/images/5.jpg" alt=""></li>
            <li><img src="./imges/images/6.jpg" alt=""></li>
            <li><img src="./imges/images/7.jpg" alt=""></li>
            <!-- 解决留白问题 -->
            <li><img src="./imges/images/1.jpg" alt=""></li>
            <li><img src="./imges/images/2.jpg" alt=""></li>
            <li><img src="./imges/images/3.jpg" alt=""></li>
        </ul>
    </div>
</body>

<每一张图片的大小为200px*200px>