CSS3---@keyframes 自定义动画及轮播图实现

最新推荐文章于 2024-07-18 10:05:33 发布

maidu_xbd

最新推荐文章于 2024-07-18 10:05:33 发布

阅读量1.3k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/maidu_xbd/article/details/97246119

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

@keyframes 自定义动画

使用动画属性来控制动画的外观，同时将动画与选择器绑定

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

动画制作：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。

轮播图代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3无缝滚动</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    nav {
        width: 900px;
        height: 100px;
        border: 1px solid orangered;
        margin: 100px auto;
        overflow: hidden;
    }

    nav li {
        float: left;
        width: 100px;
        height: 100px;
    }

    nav li img {
        width: 100%;
        height: 100%;
    }

    nav ul {
        width: 200%;
        /*设置动画及其过渡方式*/
        animation: moving 5s linear infinite;
    }

    /*自定义动画*/
    @keyframes moving {

        /*规定动画开始位置*/
        from {
            transform: translateX(0)
        }

        /*规定动画结束为止*/
        to {
            transform: translateX(-900px)
        }
    }

    nav:hover ul {
        /*暂停动画*/
        animation-play-state: paused;
    }
    </style>
</head>

<body>
    <nav>
        <ul>
            <li><img src="images/f01.png" alt=""></li>
            <li><img src="images/f02.png" alt=""></li>
            <li><img src="images/f03.png" alt=""></li>
            <li><img src="images/f04.png" alt=""></li>
            <li><img src="images/f05.png" alt=""></li>
            <li><img src="images/f06.png" alt=""></li>
            <li><img src="images/f07.png" alt=""></li>
            <li><img src="images/f08.png" alt=""></li>
            <li><img src="images/f09.png" alt=""></li>
            <li><img src="images/f01.png" alt=""></li>
            <li><img src="images/f02.png" alt=""></li>
            <li><img src="images/f03.png" alt=""></li>
            <li><img src="images/f04.png" alt=""></li>
            <li><img src="images/f05.png" alt=""></li>
            <li><img src="images/f06.png" alt=""></li>
            <li><img src="images/f07.png" alt=""></li>
            <li><img src="images/f08.png" alt=""></li>
            <li><img src="images/f09.png" alt=""></li>
        </ul>
    </nav>
</body>

</html>