1

运用CSS实现轮播图

 2 years ago
source link: https://segmentfault.com/a/1190000040698530
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

运用CSS实现轮播图

发布于 33 分钟前
<!--
 * @Author: [you name]
 * @Date: 2021-09-16 23:22:37
 * @LastEditors: [you name]
 * @LastEditTime: 2021-09-16 23:29:02
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 400px;
            height: 300px;
            margin: 100px auto;
            /* border: 2px solid blueviolet; */
            overflow: hidden;
        }

        .content {
            /* 容器的大小足够放四张图片 */
            width: 1600px;
            height: 300px;
            /* background-color: chartreuse; */
            /* margin-left: -400px; */

            /*动画名称 
            animation-name: move; */
            /* animation-duration: 5s; */
            /* 动画播放速度 */
            /* animation-timing-function: linear; */
            /* 动画播放次数 */
            /* animation-iteration-count: infinite; */
            /* steps(),逐帧播放 有多少张图片就填多少个数 */
            /*动画名称move   动画时长4s   infinite循环播放  */
            animation: move 4s infinite steps(4);

            /* 动画延迟时间
            animation-delay: 4s;
             动画填充模式
            animation-fill-mode: backwards;

            animation-play-state: paused;

            animation-direction: alternate; */

        }

        /* 光标滑过动画暂停 */
        .content:hover {
            animation-play-state: paused;
        }

        .content ul li {
            width: 400px;
            height: 300px;
            float: left;
        }

        /* .content ul li:nth-child(odd){
            background-color: cornflowerblue;

        }

        .content ul li:nth-child(even){
            background-color: cyan;

} */
        .content ul li img {
            width: 400px;
            height: 300px;
            /* background-size: 100%; */
        }

        @keyframes move {
            from {
                margin-left: 0;
            }

            to {
                /* 宽度要足够容纳四张图片的宽度 */
                margin-left: -1600px;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="content">
            <ul>
                <li><img
                        src="https://yanxuan-item.nosdn.127.net/d02bdeac95f9493cb9062a7455821384.png?type=webp&imageView&quality=95&thumbnail=355x355">
                </li>
                <li><img
                        src="https://yanxuan-item.nosdn.127.net/670456928cd4f6a42ca47226e3b832eb.jpg?type=webp&imageView&quality=95&thumbnail=355x355">
                </li>
                <li><img
                        src="https://yanxuan-item.nosdn.127.net/a0c3f252a1826411be45f58b1d0be19d.jpg?type=webp&imageView&quality=95&thumbnail=355x355">
                </li>
                <li><img
                        src="https://yanxuan-item.nosdn.127.net/0ae4a38da4f742b01a89dd840f7239d6.png?type=webp&imageView&quality=95&thumbnail=355x355">
                </li>
            </ul>
        </div>

    </div>


</body>

</html>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK