僅使用 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.tw/html/images/html-mini-logo.jpg" alt="HTML">
            </div>
            <div class="img img-2">
                <img src="https://tutorialspoint.tw/css/images/css-mini-logo.jpg" alt="CSS">
            </div>
            <div class="img img-3">
                <img src="https://tutorialspoint.tw/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
            </div>
            <div class="img img-4">
                <img src="https://tutorialspoint.tw/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
            </div>
            <div class="img img-5">
                <img src="https://tutorialspoint.tw/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.tw/html/images/html-mini-logo.jpg" alt="HTML">
            </div>
            <div class="img img-2">
                <img src="https://tutorialspoint.tw/css/images/css-mini-logo.jpg" alt="CSS">
            </div>
            <div class="img img-3">
                <img src="https://tutorialspoint.tw/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
            </div>
            <div class="img img-4">
                <img src="https://tutorialspoint.tw/tailwind_css/images/tailwind-css-mini-logo.jpg" alt="Tailwind CSS">
            </div>
            <div class="img img-5">
                <img src="https://tutorialspoint.tw/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>

輸出

Pankaj Kumar Bind

更新於： 2024 年 11 月 7 日

32 次觀看

開啟你的職業

完成課程獲得認證

開始學習