Commit cc773aa9 authored by i❤computers's avatar i❤computers

Prototype flag animation

parent c2a88513
<!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>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment