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

Animate Ken Burns effect on images in stars

parent c1839203
......@@ -13,6 +13,7 @@
svg a {
cursor: pointer;
}
#flag:hover image.waterBottomRight:nth-child(odd) {
animation: 0.5s moveWaterToTopLeft linear infinite alternate;
}
......@@ -29,6 +30,20 @@
transform: translate3d(10px, 10px, 0);
}
}
#flag:hover .star+g image {
animation: 1s moveStar;
opacity: 1;
}
@keyframes moveStar {
from {
opacity: 0;
transform: scale3d(0.85, 0.85, 0.85) translate3d(130px, 82px, 0px);
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
......@@ -79,25 +94,25 @@
<a href="https://en.wikipedia.org/wiki/Fort_Dearborn">
<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>
<g clip-path="url(#firstStar)">
<image href="image/Fort_Dearborn_1831_Kinzie.jpg" xlink:href="image/Fort_Dearborn_1831_Kinzie.jpg" width="400" height="233" x="-20" y="130"></image>
<image href="image/Fort_Dearborn_1831_Kinzie.jpg" xlink:href="image/Fort_Dearborn_1831_Kinzie.jpg" width="400" height="233" x="-20" y="130" opacity="0"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/Great_Chicago_Fire">
<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>
<g clip-path="url(#secondStar)">
<image href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" xlink:href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" width="400" height="269" x="-6" y="130"></image>
<image href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" xlink:href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" width="400" height="269" x="-6" y="130" opacity="0"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/World%27s_Columbian_Exposition">
<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>
<g clip-path="url(#thirdStar)">
<image href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" xlink:href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" width="400" height="535" x="240" y="-60"></image>
<image href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" xlink:href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" width="400" height="535" x="240" y="-60" opacity="0"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/Century_of_Progress">
<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>
<g clip-path="url(#fourthStar)">
<image href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" xlink:href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" width="301" height="449" x="420" y="165"></image>
<image href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" xlink:href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" width="301" height="449" x="420" y="165" opacity="0"></image>
</g>
</a>
</svg>
......
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