λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
🌌 | WEB DEV/HTML CSS

HTML & CSS ν™œμš© ν”„λ‘œμ νŠΈ_ μΉ΄λ“œμ…”ν”Œ & λ””μŠ€νŽœμ‹±

by KASSID 2022. 1. 28.

λͺ©μ°¨

    728x90

     μ½”λ“œ 

     

    <!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

    κ΄€λ ¨κΈ€

    λŒ“κΈ€

    ν‹°μŠ€ν† λ¦¬νˆ΄λ°”