无限滚动练习(纯css)

最新推荐文章于 2023-07-13 00:41:58 发布

407指导员

最新推荐文章于 2023-07-13 00:41:58 发布

阅读量258

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110449662

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

无限滚动练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无限滚动练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*ul不够宽浮动只能并排放两张图片，所以直接增加一个盒子套住ul*/
        div {
            width: 1000px;
            height: 333px;
            border: 1px solid #000;
            margin: 100px auto;
            /*    隐藏多余部分*/
            overflow: hidden;
        }

        /*然后将盒子设置成需要展示的宽高，ul只要大于1200px即可*/
        ul {
            width: 3000px;
            height: 333px;
            background-color: black;
            animation: move 10s linear 0s infinite normal;
        }

        @keyframes move {
            from {
                margin-left: 0;
            }
            to {
                /*移动四张图片*/
                margin-left: -2000px;
            }

        }

        ul li {
            list-style: none;
            width: 500px;
            height: 333px;
            background-color: red;
            border: 1px solid #000;
            box-sizing: border-box;
            float: left;
        }
        /*谁在动就停止谁的动画，这里是ul在动，而不是li*/
        ul:hover {
            animation-play-state: paused;
        }
        ul:hover li {
            opacity: 0.5;
        }
        ul li:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><img src="images/179images/1.jpg" alt=""></li>
        <li><img src="images/179images/2.jpg" alt=""></li>
        <li><img src="images/179images/3.jpg" alt=""></li>
        <li><img src="images/179images/4.jpg" alt=""></li>
        <!--  类比js中的无限滚动原理都是一样的，最后加上第一帧显示的图片，这样最后一次滚动，就是最开始图片再立刻跳转，就看不出跳转的效果-->
        <li><img src="images/179images/1.jpg" alt=""></li>
        <li><img src="images/179images/2.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

注意点：

1，无限滚动之前用js做了一个，这个是css做的比较起来，css3还是很友好啊，减少了不少js代码。

2.就是一个大的盒子作为显示框，ul作为旋转的内容，li里放上每张图片，div影藏溢出内容。

3。无限滚动的本质就是：在所有重复的图片最后再加上第一帧显示的图片，这样在最后一次滚动就是循环第一帧，再把整个ul瞬间恢复到left:0;看不出来间断感。

4.注意以下三段代码
ul:hover {
    animation-play-state: paused;
}
ul:hover li {
    opacity: 0.5;
}
ul li:hover {
    opacity: 1;
}
当鼠标悬停时，整个ul动画停止。

当鼠标悬停时，所有li透明度为0.5可以看到ul背景颜色

当鼠标悬停在li上时，li的透明度变成1，最亮

看着代码相似，其实还是有很大的区别的。

407指导员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无限滚动练习(纯css)

无限滚动练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限滚动练习</title> <style> * { margin: 0; padding: 0; } /*ul不够宽浮动只能并排放两张图片，所以直接增
复制链接

扫一扫

专栏目录