๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/HTML CSS

HTML & CSS ํ™œ์šฉ ํ”„๋กœ์ ํŠธ_ ์นด๋“œ์…”ํ”Œ & ๋””์ŠคํŽœ์‹ฑ

by KASSID 2022. 1. 28.

๋ชฉ์ฐจ

 ์ฝ”๋“œ 

 

<!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">
    <link rel="stylesheet" href="cardshuffle.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="btn"></div>
        <div class="box box1 card1"></div>
        <div class="box box2 card2"></div>
        <div class="box box3 card3"></div>
        <div class="box box4 card4"></div>
        <div class="box box5 card5"></div>
        <div class="box box6 card6"></div>
        <div class="box box7 card7"></div>
        <div class="box box7 card8"></div>
    </div>
</body>
</html>

 

.container{
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
}
.box{
    width: 100px;
    height: 130px;
    border: 1px solid #000;
    border-radius: 5px;
    position: absolute;
    top: 35%;
    left: 40%;
}
.btn{
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}
.box1{
    background: crimson;
    z-index: 1;
}
.box2{
    background: darkorange;
    z-index: 0;
}
.box3{
    background:gold;
    z-index: 0;
}
.box4{
    background:forestgreen;
    z-index: 0;
}
.box5{
    background:mediumblue;
    z-index: 0;
}
.box6{
    background: navy;
    z-index: 0;
}
.box7{
    background:blueviolet;
    z-index: 0;
}
.box8{
    background:white;
    z-index: 0;
}




.btn:hover ~ .card1{
    transform-origin: 50% 0%;
    animation : shuffle1 10s infinite;
}
.btn:hover ~ .card2{
    transform-origin: 50% 0%;
    animation : shuffle2 10s infinite;
}
.btn:hover ~ .card3{
    transform-origin: 50% 0%;
    animation : shuffle3 10s infinite;
}
.btn:hover ~ .card4{
    transform-origin: 50% 0%;
    animation : shuffle4 10s infinite;
}
.btn:hover ~ .card5{
    transform-origin: 50% 0%;
    animation : shuffle5 10s infinite;
}
.btn:hover ~ .card6{
    transform-origin: 50% 0%;
    animation : shuffle6 10s infinite;
}
.btn:hover ~ .card7{
    transform-origin: 50% 0%;
    animation : shuffle7 10s infinite;
}
.btn:hover ~ .card8{
    transform-origin: 50% 0%;
    animation : shuffle7 10s infinite;
}


@keyframes shuffle1 {
    0% {
        z-index: 6;
        transform : translate(0%, 0%);
    }
    5% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    6% {
        z-index: 0;
    }
    10% {
        z-index: 0;
        transform : translate(0%, 0%);
    }
    20% {
        z-index: 1;
    }
    30%{z-index: 2;}
    40%{z-index: 3;}
    50%{z-index: 4;}
    60%{z-index: 5;}
    70%{z-index: 6; transform : translate(0%, 0%);}
    75%{transform : translate(0%, -130%);}
    90%{transform : translate(0%, -130%);}
}
@keyframes shuffle2 {
    0% {
        z-index: 5;
    }
    10% {
        z-index: 6;
        transform : translate(0%, 0%);
    }
    15% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    16% {
        z-index: 0;
    }
    20% {
        z-index: 0;
        transform : translate(0%, 0%);
    }
    30%{z-index: 1;}
    40%{z-index: 2;}
    50%{z-index: 3;}
    60%{z-index: 4;}
    70%{z-index: 5; transform : translate(0%, 0%);}
    72%{transform : translate(0%, 0%);}
    77%{transform : translate(110%, -100%);}
    90%{transform : translate(110%, -100%);}
}
@keyframes shuffle3 {
    0% {
        z-index: 4;
    }
    10% {
        z-index: 5;
    }
    20%{
        z-index: 6;
        transform : translate(0%, 0%);
    }
    25% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    26% {
        z-index: 0;
    }
    30% {
        z-index: 0;
        transform : translate(0%, 0%);
    }
    40%{z-index: 1;}
    50%{z-index: 2;}
    60%{z-index: 3;}
    74%{z-index: 4; transform : translate(0%, 0%);}
    79%{transform : translate(140%, 10%);}
    90%{transform : translate(140%, 10%);}
}
@keyframes shuffle4 {
    0%{
        z-index: 3;
    }
    10% {
        z-index: 4;
    }
    20% {
        z-index: 5;
    }
    30% {
        z-index: 6;
        transform : translate(0%, 0%);
    }
    35% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    36% {
        z-index: 0;
    }
    40% {
        z-index: 0;
        transform : translate(0%, 0%);
    }
    50%{z-index: 1;}
    60%{z-index: 2;}
    76%{z-index: 3; transform : translate(0%, 0%);}
    81%{transform : translate(80%, 117%);}
    90%{transform : translate(80%, 117%);}
}
@keyframes shuffle5 {
    0% {
        z-index: 2;
    }
    10% {
        z-index: 3;
    }
    20% {
        z-index: 4;
    }
    30%{
        z-index: 5;
    }
    40% {
        z-index: 6;
        transform : translate(0%, 0%);
    }
    45% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    46% {
        z-index: 0;
    }
    50% {
        z-index: 0;
        transform : translate(0%, 0%);
    }
    60%{z-index: 1;}
    78%{z-index: 2; transform : translate(0%, 0%);}
    83%{transform : translate(-80%, 117%);}
    90%{transform : translate(-80%, 117%);}
}
@keyframes shuffle6 {
    0% {
        z-index: 1;
    }
    10% {
        z-index: 2;
    }
    20% {
        z-index: 3;
    }
    30%{
        z-index: 4;
    }
    40% {
        z-index: 5;
    }
    50% {
        z-index: 6;
        transform : translate(0%, 0%);
    }
    55% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    56% {
        z-index: 0;
    }
    60% {
        z-index: 0;
        transform : translate(0%, 0%);
    }
    80%{z-index: 1; transform : translate(0%, 0%);}
    85%{transform : translate(-140%, 10%);}
    90%{transform : translate(-140%, 10%);}
}
@keyframes shuffle7 {
    0% {
        z-index: 0;
    }
    10% {
        z-index: 1;
    }
    20% {
        z-index: 2;
    }
    30%{
        z-index: 3;
    }
    40% {
        z-index: 4;
    }
    50% {
        z-index: 5;
    }
    60% {
        z-index: 6;
        transform : translate(0%, 0%);
    }
    65% {
        transform : translate(-105%, 0%) skewY(10deg);
        z-index: 6;
    }
    66% {
        z-index: 0;
    }
    70% {z-index: 0; transform : translate(0%, 0%);}
    82%{z-index: 0; transform : translate(0%, 0%);}
    87%{transform : translate(-110%, -100%);}
    90%{transform : translate(-110%, -100%);}
}

 

 ๊ฒฐ๊ณผ 

 ์ฝ”๋ฉ˜ํŠธ 

 

CSS ์†์„ฑ ์ค‘ transition, transform, animation, z-index ๋ฅผ ํ™œ์šฉํ•ด์„œ

์นด๋“œ์…”ํ”Œ์„ ํ•˜๊ณ  ๋””์ŠคํŽœ์‹ฑ์„ ํ•˜๋Š” ๊ฒƒ์„ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค.

 

์‚ฌ์‹ค ์„ž๋Š” ๊ฒƒ๋งŒ ๋งŒ๋“ค์—ˆ๋‹ค๊ฐ€

์•„๋ถ€์ง€๊ฐ€ ๊ฐฏ์ˆ˜๋„ ํ•œ ๋ฒˆ ๋Š˜๋ ค๋ด~!, ๋‚˜๋ˆ ์ฃผ๋Š” ๊ฒƒ๋„ ํ•ด๋ด!

๋ผ๊ณ  ๋ฏธ์…˜์„ ์ฃผ์…”์„œ

๋” ์™„์„ฑ๋„ ์žˆ๊ณ  ์žฌ๋ฐŒ๊ฒŒ ์ž‘์—…์„ ํ•œ ๊ฒƒ ๊ฐ™๋‹ค!

์ €์ž‘์žํ‘œ์‹œ

'๐ŸŒŒ | WEB DEV > HTML CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

CSS_flex(2)  (0) 2022.01.30
CSS_flexbox(1) ์ˆ˜ํ‰์ •๋ ฌ  (0) 2022.01.30
CSS _transition(2) (timing-function)  (0) 2022.01.14
CSS _transition(1) (property, timing, delay)  (0) 2022.01.14
CSS์˜ ํฌ๊ธฐ๋‹จ์œ„๋“ค!(px, em, rem, vw ๋“ฑ)  (0) 2022.01.09

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”