[css] CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지

💻Coding/📒 CSS

[css] CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지

음은응 2022. 8. 29. 11:24

728x90

CSS
이미지 자동 슬라이드 만들기
: 흘러가는 이미지

✅ 상황
→ HTML과 CSS만으로 이미지 자동 슬라이드 만들고 싶을 때

🟢 HTML

<!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>CSS Slide Image</title>
</head>
<body>
    <div id="slider">
        <div class="image-box">
            <div><img class="" src="../images/ch_tiktok.png" alt=""></div>
            <div><img class="" src="../images/ch_facebook.png" alt=""></div>
            <div><img class="" src="../images/ch_insta.png" alt=""></div>
            <div><img class="" src="../images/ch_kakao.png" alt=""></div>
            <div><img class="" src="../images/ch_notion.png" alt=""></div>
            <div><img class="" src="../images/ch_github.png" alt=""></div>
            <div><img class="" src="../images/ch_line.png" alt=""></div>
            <div><img class="" src="../images/ch_youtube.png" alt=""></div>
            <!--   clone     -->
            <div><img class="" src="../images/ch_tiktok.png" alt=""></div>
            <div><img class="" src="../images/ch_facebook.png" alt=""></div>
            <div><img class="" src="../images/ch_insta.png" alt=""></div>
            <div><img class="" src="../images/ch_kakao.png" alt=""></div>
            <div><img class="" src="../images/ch_notion.png" alt=""></div>
            <div><img class="" src="../images/ch_github.png" alt=""></div>
            <div><img class="" src="../images/ch_line.png" alt=""></div>
            <div><img class="" src="../images/ch_youtube.png" alt=""></div>
        </div>
    </div>
</body>
</html>

🟢 CSS

@charset "UTF-8";

#slider {
    overflow: hidden;
    position: relative;
    /* border: 20px solid red; */
    /* // 이미지 보여지는 뷰 부분만큼 px조절 */
    width: 1440px;  
    height: 140px;
    box-sizing: border-box;
}
.image-box {
    /* 원본+클론의 총 합 */
    width:5478px;
    height:100%;
    display:flex;
    flex-wrap:nowrap;
    animation: bannermove 20s linear infinite;
}
.image-box > div {
    margin: 0px -1px 0px 0px;
}
@keyframes bannermove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50%, 0);
    }
}

🟢 구현 페이지

🟢 전체 코드

<!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>CSS Slide</title>
    <style>
    #slider {
        overflow: hidden;
        position: relative;
        /* border: 20px solid red; */
        /* // 이미지 보여지는 뷰 부분만큼 px조절 */
        width: 1440px;  
        height: 140px;
        box-sizing: border-box;
    }
    .image-box {
        /* 원본+클론의 총 합 */
        width:5478px;
        height:100%;
        display:flex;
        flex-wrap:nowrap;
        animation: bannermove 20s linear infinite;
    }
    .image-box > div {
        margin: 0px -1px 0px 0px;
    }
    @keyframes bannermove {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(-50%, 0);
        }
    }
    </style>
</head>
<body>
    <div id="slider">
        <div class="image-box">
            <div><img class="" src="../images/ch_tiktok.png" alt=""></div>
            <div><img class="" src="../images/ch_facebook.png" alt=""></div>
            <div><img class="" src="../images/ch_insta.png" alt=""></div>
            <div><img class="" src="../images/ch_kakao.png" alt=""></div>
            <div><img class="" src="../images/ch_notion.png" alt=""></div>
            <div><img class="" src="../images/ch_github.png" alt=""></div>
            <div><img class="" src="../images/ch_line.png" alt=""></div>
            <div><img class="" src="../images/ch_youtube.png" alt=""></div>
            <!--   clone     -->
            <div><img class="" src="../images/ch_tiktok.png" alt=""></div>
            <div><img class="" src="../images/ch_facebook.png" alt=""></div>
            <div><img class="" src="../images/ch_insta.png" alt=""></div>
            <div><img class="" src="../images/ch_kakao.png" alt=""></div>
            <div><img class="" src="../images/ch_notion.png" alt=""></div>
            <div><img class="" src="../images/ch_github.png" alt=""></div>
            <div><img class="" src="../images/ch_line.png" alt=""></div>
            <div><img class="" src="../images/ch_youtube.png" alt=""></div>
        </div>
    </div>
</body>
</html>

728x90

저작자표시 비영리 변경금지

'💻Coding > 📒 CSS' 카테고리의 다른 글

[CSS] width height 100% 와 100vh의 차이점 (0)	2022.09.04
[css] css background : transparent 란? \| background : none 이랑 차이점 (0)	2022.09.02
[css] CSS 스타일 제거 : reset CSS (기본 스타일 지우기) (0)	2022.08.28
[CSS] html a태그 스타일 없애기 : css 스타일 지우기 (0)	2022.08.21
CSS _컬러_color (0)	2021.11.23

현재글[css] CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지

250x250

쭈랜드입니다:)

photoshop, oracle, adobe, 포토샵, SQL, sqldeveloper, 자바스크립트, 오라클, 오라클오류, Spring, 드로우앤드류, HTML, css, 드로우마이브랜드, eclipse, 포토샵단축키, drawandrew, javascript, 어도비, PSD,

Today :
Yesterday :

[css] CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지

'💻Coding > 📒 CSS' 카테고리의 다른 글

'💻Coding/📒 CSS'의 다른글

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

[css] CSS 이미지 자동 슬라이드 만들기 : 흘러가는 이미지

'💻Coding > 📒 CSS' 카테고리의 다른 글

'💻Coding/📒 CSS'의 다른글

관련글

티스토리툴바