001 小案例：类似“轮播图”转动效果

最新推荐文章于 2024-04-12 11:26:16 发布

nine-seven

最新推荐文章于 2024-04-12 11:26:16 发布

阅读量101

点赞数

分类专栏： html & CSS 小案例

本文链接：https://blog.csdn.net/Twelve_Y/article/details/118940361

版权

CSS Flex布局 @keyframes 动画滚动效果暂停动画

关键词由CSDN通过智能技术生成

html & CSS 小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小案例

动画效果@keyframs
flex布局：display:flex

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./cssReset.css">
    <style>
        /*针对ul做移动，带动的是所有的li */
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-1000px);
            }
        }
        .roll {
            /* width: 100%; */
            overflow: hidden;
            margin: 100px auto;
        }
        .roll>ul {
            width: 200%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            animation: move 10s 0s linear infinite;
            cursor: pointer;
        }
        .roll>ul:hover {
            animation-play-state: paused;
        }
        .roll li {
            text-align: center;
            width: 12%;
            height: 200px;
            /* background-color: pink; */
        }
        .roll li img {
            display: block;
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="part">
        <div class="center">
            <div class="roll">
                <ul>
                    <li>
                        <img src="./img/roll/img1.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img2.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img3.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img4.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img1.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img2.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img3.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                    <li>
                        <img src="./img/roll/img4.png" alt="">
                        <p>笔记本电脑</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

nine-seven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001 小案例：类似“轮播图”转动效果

小案例动画效果@keyframsflex布局：display:flex<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./cssReset.css"> <style> /*针对ul做移动，带动的
复制链接

扫一扫