Animate Flag.html 2.24 KB
Newer Older
i❤computers's avatar
i❤computers committed
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animate Flag</title>
    <style>
        #flag .wipes {
            transition: transform 0.3s ease;
            transform-origin: right;
        }

        #flag .wipes:nth-of-type(4) {
            transition-delay: 0.2s;
        }

        #flag:hover .wipes {
            transform: scaleX(0);
        }

        #flag .star {
            transition: transform 0.1s ease-in, opacity 0.1s ease-in;
            opacity: 0;
            transform: scale(2);
            transform-origin: center;
        }
        #flag .star:nth-of-type(3) {
            transition-delay: 0.1s;
        }
        #flag .star:nth-of-type(4) {
            transition-delay: 0.2s;
        }
        #flag .star:nth-of-type(5) {
            transition-delay: 0.3s;
        }
        #flag:hover .star {
            opacity: 1;
            transform: scale(1);
        }
    </style>
</head>
<body>
<svg id="flag" width="100%" height="100%" viewBox="0 0 720 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <path d="M0,0l720,0l0,480l-720,0l0,-480Z" style="fill:#fff;fill-rule:nonzero;"></path>
    <rect x="0" y="80" width="720" height="80" style="fill:#b3ddf2;"></rect>
    <rect class="wipes" x="0" y="75" width="720" height="90" style="fill:#FFF;"></rect>
    <rect x="0" y="320" width="720" height="80" style="fill:#b3ddf2;"></rect>
    <rect class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;"></rect>
    <path class="star" d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
    <path class="star" d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
    <path class="star" d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
    <path class="star" d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
</svg>
</body>
</html>