CSS动画实现轮播图

最新推荐文章于 2023-11-04 12:29:48 发布

我就是陈星烨

最新推荐文章于 2023-11-04 12:29:48 发布

阅读量2.8k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u012657197/article/details/77412907

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

关键是将外面的container设置成为相对定位且其width为一个子元素的width，里面的子元素长度设置为count*width，且绝对定位，利用animation实现动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #carousal{
            position: relative;
            width:300px;
            height: 300px;
            overflow: hidden;
        }
         .list-carousal{
            margin:0;
            list-style: none;
            width:300px;
            height: 300px;
            float: left;
        }
        #content{
            position: absolute;
            top:0;
            left:0;
            width:1200px;
            height: 300px;
            animation: toLeft 6s linear infinite;
        }

        @keyframes toLeft {
            0%{
                margin-left: 0;
            }
            30% {
                margin-left: -300px;
            }
            55% {
                margin-left: -600px;
            }
            100% {
                margin-left: -900px;
            }
        }
    </style>
</head>
<body>
<div id="carousal">
    <ul id="content">
        <li class="list-carousal" style="background-color: red"></li>
        <li class="list-carousal" style="background-color: gray"></li>
        <li class="list-carousal" style="background-color: green"></li>
        <li class="list-carousal" style="background-color: black"></li>
    </ul>
</div>
</body>
</html>

我就是陈星烨

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS动画实现轮播图

关键是将外面的container设置成为相对定位且其width为一个子元素的width，里面的子元素长度设置为count*width，且绝对定位，利用animation实现动画效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="t
复制链接

扫一扫