HTML+CSS 图片轮播卡片

最新推荐文章于 2025-04-20 16:47:23 发布

若冰说

最新推荐文章于 2025-04-20 16:47:23 发布

阅读量822

点赞数 15

分类专栏：若冰说CSS css 文章标签： css html 前端 javascript 若冰说CSS

本文链接：https://blog.youkuaiyun.com/weixin_72553980/article/details/139484847

版权

本文介绍如何使用HTML和CSS实现一个图片轮播卡片效果，包含卡片容器、图片、内容区域和滑动条。通过设置元素的样式和布局，实现了卡片的圆角、阴影效果以及图片的切换功能。

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

效果演示

13-图片轮播卡片.gif

实现了一个图片轮播卡片的效果，包括一个容器（.container）、一个卡片（.card）、一个图片（.img）、一个内容区域（.content）和一个滑动条（.slider）。卡片包含一张图片和一些文本内容，图片可以通过滑动条进行切换。整个卡片具有圆角和阴影效果，使其看起来更加美观。

Code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播卡片</title>
    <link rel="stylesheet" href="./13-图片轮播卡片.css">
</head>

<body>
    <div class="container">
        <input type="radio" name="select" id="slide_1" checked hidden>
        <input type="radio" name="select" id="slide_2" hidden>
        <input type="radio" name="select" id="slide_3" hidden>

        <div class="slider">
            <label for="slide_1" class="slide slide-1"></label>
            <label for="slide_2" class="slide slide-2"></label>
            <label for="slide_3" class="slide slide-3"></label>
        </div>

        <div class="card card-1">
            <div class="img">
                <img src="./images/1.jpg" alt="波雅·汉库克">
            </div>

最低0.47元/天解锁文章