仅使用 HTML 和 CSS 的滑块图片剪辑动画

在本教程中，创建一个仅使用 HTML 和 CSS、带有滑块的动画剪辑是展示一系列图像的一种绝佳方式，这种方式在视觉上具有吸引力、互动性，且无需使用 JavaScript，我们将引导你完成使用纯 HTML 和 CSS 创建动画剪辑效果的过程，动画以圆形剪辑路径显示，并使用时尚的单选按钮作为条形控件滑块。

项目设置

你需要设置基本的 HTML 和 CSS 来使此图片剪辑具有动画效果，并且确保你的图片已准备就绪，并具有一个简单的文件结构-

  • index.html（HTML 文件）
  • style.css（CSS 文件）
  • images/（包含你图片的文件夹）

HTML 结构

HTML 布局包含单选按钮、图片容器和滑块标签。单选按钮充当每个图片幻灯片的选取器，每个标签对应于一个单选按钮，用于控制滑块。

index.html

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

<head>
    <meta charset="utf-8">
    <title>Image Clip Animation</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <input type="radio" name="slide" id="one" checked>
        <input type="radio" name="slide" id="two">
        <input type="radio" name="slide" id="three">
        <input type="radio" name="slide" id="four">
        <input type="radio" name="slide" id="five">
        
        <div class="image-container">
            <div class="img img-1">
                <img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg" alt="HTML">
            </div>
            <div class="img img-2">
                <img src="https://tutorialspoint.com/css/images/css-mini-logo.jpg" alt="CSS">
            </div>
            <div class="img img-3">
                <img src="https://tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
            </div>
            <div class="img img-4">
                <img src="https://tutorialspoint.com/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
            </div>
            <div class="img img-5">
                <img src="https://tutorialspoint.com/nodejs/images/nodejs-mini-logo.jpg" alt="NodeJS">
            </div>
        </div>

        <div class="sliders">
            <label for="one" class="one"></label>
            <label for="two" class="two"></label>
            <label for="three" class="three"></label>
            <label for="four" class="four"></label>
            <label for="five" class="five"></label>
        </div>
    </div>
</body>

</html>

CSS 样式

接下来，在 style.css 中添加样式以创建动画效果并构建布局。

styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper {
    position: relative;
    width: 320px;
    /* Increased to accommodate the slider controls */
    height: 120px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.image-container {
    position: relative;
    width: 100%;
    height: 95px;
    overflow: hidden;
}

.wrapper .img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wrapper .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: circle(0% at 0% 100%);
    transition: clip-path 0.7s ease;
}

#one:checked~.image-container .img-1 img {
    clip-path: circle(150% at 0% 100%);
}

#two:checked~.image-container .img-1 img,
#two:checked~.image-container .img-2 img {
    clip-path: circle(150% at 0% 100%);
}

#three:checked~.image-container .img-1 img,
#three:checked~.image-container .img-2 img,
#three:checked~.image-container .img-3 img {
    clip-path: circle(150% at 0% 100%);
}

#four:checked~.image-container .img-1 img,
#four:checked~.image-container .img-2 img,
#four:checked~.image-container .img-3 img,
#four:checked~.image-container .img-4 img {
    clip-path: circle(150% at 0% 100%);
}

#five:checked~.image-container .img-1 img,
#five:checked~.image-container .img-2 img,
#five:checked~.image-container .img-3 img,
#five:checked~.image-container .img-4 img,
#five:checked~.image-container .img-5 img {
    clip-path: circle(150% at 0% 100%);
}

.wrapper .sliders {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
}

.wrapper .sliders label {
    border: 2px solid rgb(3, 223, 14);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

#one:checked~.sliders label.one,
#two:checked~.sliders label.two,
#three:checked~.sliders label.three,
#four:checked~.sliders label.four,
#five:checked~.sliders label.five {
    width: 35px;
    border-radius: 14px;
    background: rgb(3, 223, 14);
}

.sliders label:hover {
    background: rgb(3, 223, 14);
}

input[type="radio"] {
    display: none;
}

使用滑块完成代码图像剪辑动画

在这里，我们将这两个代码合并在一起，以便您可以在我们的门户网站上查看实时输出。

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

<head>
    <meta charset="utf-8">
    <title>Image Clip Animation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wrapper {
            position: relative;
            width: 320px;
            /* Increased to accommodate the slider controls */
            height: 120px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .image-container {
            position: relative;
            width: 100%;
            height: 95px;
            overflow: hidden;
        }

        .wrapper .img {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .wrapper .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: circle(0% at 0% 100%);
            transition: clip-path 0.7s ease;
        }

        #one:checked~.image-container .img-1 img {
            clip-path: circle(150% at 0% 100%);
        }

        #two:checked~.image-container .img-1 img,
        #two:checked~.image-container .img-2 img {
            clip-path: circle(150% at 0% 100%);
        }

        #three:checked~.image-container .img-1 img,
        #three:checked~.image-container .img-2 img,
        #three:checked~.image-container .img-3 img {
            clip-path: circle(150% at 0% 100%);
        }

        #four:checked~.image-container .img-1 img,
        #four:checked~.image-container .img-2 img,
        #four:checked~.image-container .img-3 img,
        #four:checked~.image-container .img-4 img {
            clip-path: circle(150% at 0% 100%);
        }

        #five:checked~.image-container .img-1 img,
        #five:checked~.image-container .img-2 img,
        #five:checked~.image-container .img-3 img,
        #five:checked~.image-container .img-4 img,
        #five:checked~.image-container .img-5 img {
            clip-path: circle(150% at 0% 100%);
        }

        .wrapper .sliders {
            display: flex;
            justify-content: center;
            gap: 6px;
            margin-top: 5px;
        }

        .wrapper .sliders label {
            border: 2px solid rgb(3, 223, 14);
            width: 13px;
            height: 13px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #one:checked~.sliders label.one,
        #two:checked~.sliders label.two,
        #three:checked~.sliders label.three,
        #four:checked~.sliders label.four,
        #five:checked~.sliders label.five {
            width: 35px;
            border-radius: 14px;
            background: rgb(3, 223, 14);
        }

        .sliders label:hover {
            background: rgb(3, 223, 14);
        }

        input[type="radio"] {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input type="radio" name="slide" id="one" checked>
        <input type="radio" name="slide" id="two">
        <input type="radio" name="slide" id="three">
        <input type="radio" name="slide" id="four">
        <input type="radio" name="slide" id="five">
        
        <div class="image-container">
            <div class="img img-1">
                <img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg" alt="HTML">
            </div>
            <div class="img img-2">
                <img src="https://tutorialspoint.com/css/images/css-mini-logo.jpg" alt="CSS">
            </div>
            <div class="img img-3">
                <img src="https://tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
            </div>
            <div class="img img-4">
                <img src="https://tutorialspoint.com/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
            </div>
            <div class="img img-5">
                <img src="https://tutorialspoint.com/nodejs/images/nodejs-mini-logo.jpg" alt="NodeJS">
            </div>
        </div>

        <div class="sliders">
            <label for="one" class="one"></label>
            <label for="two" class="two"></label>
            <label for="three" class="three"></label>
            <label for="four" class="four"></label>
            <label for="five" class="five"></label>
        </div>
    </div>
</body>

</html>

输出


更新于： 2024 年 11 月 7 日

32 次观看

开启你的 职业

完成课程获得认证

开始学习
广告