纯CSS实现轮播图（结合动画）

A饭不吃饭

已于 2022-08-17 23:18:40 修改

阅读量1k

点赞数 1

分类专栏： html+css 文章标签： css html css3

于 2022-08-17 23:17:23 首次发布

本文链接：https://blog.csdn.net/fanfan_code/article/details/126395790

版权

本文介绍了如何使用CSS3实现一个轮播图功能，包括图片自动切换的原理，通过设置溢出隐藏及内部div布局，结合伪类创建导航点，并利用动画实现图片的平滑切换。动画效果通过animation属性设置，确保了第一张图片的停留时间及平滑过渡。

摘要由CSDN通过智能技术生成

图片自动切换实现原理：使用一个div（class="out"）并设置溢出隐藏保证每次只显示一张，在内部设置另一个div.outer包裹所有的图片,图片均水平排列，包裹图片的div使用伪类添加一个黑色的点（黑点设置在底部中间，通过计算点的宽度为9px，间距为6px，设置好6个点的位置），在.out下再加一个div来设置6个空心圆。动画实现图片切换，让.outer向右移动，使用animation: move 12s steps(6) 2s;即动画延迟2s动（保证第一张图片停两秒），重复一次move动画12s。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .outer::after {
            content: '';

最低0.47元/天解锁文章

A饭不吃饭

关注

1
点赞
踩
3

收藏

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

图片自动切换实现原理：使用一个div（class="out"）并设置溢出隐藏保证每次只显示一张，在内部设置另一个div.outer包裹所有的图片,图片均水平排列，包裹图片的div使用伪类添加一个黑色的点（黑点设置在底部中间，通过计算点的宽度为9px，间距为6px，设置好6个点的位置），在.out下再加一个div来设置6个空心圆。动画实现图片切换，让.outer向右移动，使用animation: move 12s steps(6) 2s;即动画延迟2s动（保证第一张图片停两秒），重复一次move动画12s。.
复制链接

扫一扫