网页标题图片以及原生h5+C3轮播

最新推荐文章于 2023-02-20 07:46:35 发布

原创最新推荐文章于 2023-02-20 07:46:35 发布 · 513 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#H5+C3轮播-网页 #网页标题图片

晴天有点孤单同时被 2 个专栏收录

124 篇文章

订阅专栏

HTML+CSS

19 篇文章

订阅专栏

本文介绍了一种使用HTML5和CSS3实现的轮播图效果。通过关键帧动画控制图片位置变化，达到自动轮播的效果。适用于网页设计中需要展示多张图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页标题图片

h5+c3轮播

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        section {
            width: 430px;
            height: 440px;
            overflow: hidden;
        }

        a {
            display: block;
            width: 430px;
            height: 440px;
        }

        section a img:nth-of-type(1) {
            animation: myfirst 15s infinite;
        }

        @keyframes myfirst {
            0% {
                transform: translatey(0px);
            }
            25% {
                transform: translatey(-445px);
            }
            50% {
                transform: translatey(-890px);
            }
            75% {
                transform: translatey(-445px);
            }
            100% {
                transform: translatey(0px);
            }
        }
    </style>
</head>

<body>
    <section>
        <a href="#"><img src="img/8.jpg"></a>
        <a href="#"><img src="img/9.jpg"></a>
        <a href="#"><img src="img/10.jpg"></a>
    </section>

</body>