47 个 惊人的 CSS3 动画示例

     <p>本文介绍47个令人咋舌的CSS3动画演示汇编。他们展示了CSS3的转换和过渡性的处理。有些是非常有用的，可以作为浏览器的替代品使用。这些效果大多是简单的，看起来很酷。为了尝试这些效果，你需要的WebKit浏览器，如Safari和Chrome。</p>    <h3>CSS3 Clock With jQuery</h3>    <p class="image"><a href="/misc/goto?guid=4958201650418168762"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/6b372bcb8896796539c33a8ddb188a4e.jpg" width="470" height="260" /></a></p>    <h3>Analogue Clock</h3>    <p class="image"><a href="/misc/goto?guid=4958202479511669699"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/99be43d8ac232e17801f7de90a60b42f.jpg" width="470" height="260" /></a></p>    <h3>3D Cube That Rotates Using Arrow Keys</h3>    <p class="image"><a href="/misc/goto?guid=4958202480251649234"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/025b3e6f112137dd8ca2a37daf0209bb.jpg" width="470" height="260" /></a></p>    <h3>Multiple 3D Cubes (Slide In/Out)</h3>    <p class="image"><a href="/misc/goto?guid=4958202480989257555"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/1819b4b7d4cf140159dcd4215c742d45.jpg" width="470" height="260" /></a></p>    <h3>CSS3 Accordion</h3>    <p class="image"><a href="/misc/goto?guid=4958202481731124022"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/aea497d1fb4b9a7c0eec0b998cf459ad.jpg" width="470" height="260" /></a></p>    <h3>Auto-Scrolling Parallax</h3>    <p class="image"><a href="/misc/goto?guid=4958202482474109489"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/7c231435db058f5b225ecdfb2dde15d2.jpg" width="470" height="260" /></a></p>    <h3>Isocube</h3>    <p class="image"><a href="/misc/goto?guid=4958202483215811026"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/39a1a7708824ab4ab58880a65c5c98fb.jpg" width="470" height="260" /></a></p>    <h3>Image Gallery</h3>    <p class="image"><a href="/misc/goto?guid=4958202483955074488"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/1376b1bb47d5d729bb84bc1f713c4f09.jpg" width="470" height="260" /></a></p>    <h3>Matrix</h3>    <p class="image"><a href="/misc/goto?guid=4958202484691975844"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/23836ccad52f0bedfb27e99663babe88.jpg" width="470" height="260" /></a></p>    <h3>7 Javascript-effect Alternatives Using CSS3</h3>    <p class="image"><a href="/misc/goto?guid=4958202485433574215"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/b66caceea915fd563980c1dae5694f2a.jpg" width="470" height="260" /></a></p>    <h3>Image Hover Effects</h3>    <p class="image"><a href="/misc/goto?guid=4958202486173991232"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/e402f20f9ac26ad18e1d3f7dc128b137.jpg" width="470" height="260" /></a></p>    <h3>Turning Coke Can (Control With Scrollbar)</h3>    <p class="image"><a href="/misc/goto?guid=4958202486900014295"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/71bcdd9c5020fe25440df303fe945905.jpg" width="470" height="260" /></a></p>    <h3>3D Meninas</h3>    <p class="image"><a href="/misc/goto?guid=4958202487661617228"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/d7cd9a580d992bb4f6e7158dadc209b9.jpg" width="470" height="260" /></a></p>    <h3>Polaroid Gallery</h3>    <p class="image"><a href="/misc/goto?guid=4958202488414598115"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/f6871a21462dfc0a2720d6dce47dc38d.jpg" width="470" height="260" /></a></p>    <h3>Space</h3>    <p><em>Note:</em> this one is graphic intense and takes a while to load, but the result is crazy!</p>    <p class="image"><a href="/misc/goto?guid=4958202489143986977"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/eaf255d1c542a3fa7a43b9bf7316eb9e.jpg" width="470" height="260" /></a></p>    <h3>Mac Dock</h3>    <p class="image"><a href="/misc/goto?guid=4958202489879229761"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/0500b7a6932557eb1843a3da5a57fd7b.jpg" width="470" height="260" /></a></p>    <h3>Drop-In Modals</h3>    <p class="image"><a href="/misc/goto?guid=4958202490615526208"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/911e4fabed009d1fd100c81f32aa21ec.jpg" width="470" height="260" /></a></p>    <h3>Sliding Vinyl</h3>    <p class="image"><a href="/misc/goto?guid=4958202491362608835"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/782c9e88ef8c9ec34de3ef8557ebbaa8.jpg" width="470" height="260" /></a></p>    <h3>Zooming Polaroids</h3>    <p class="image"><a href="/misc/goto?guid=4958202492100720025"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/ae602eabedad33a170f5d00beb3f1a5e.jpg" width="470" height="260" /></a></p>    <h3>Animated Rocket</h3>    <p class="image"><a href="/misc/goto?guid=4958202492845115039"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/47fc0e5ea82fa1f7c4c6b36326826d38.jpg" width="470" height="260" /></a></p>    <h3>Poster Circle</h3>    <p class="image"><a href="/misc/goto?guid=4958202493587851437"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/12a4ce13e9d0d625e95143842f2b7245.jpg" width="470" height="260" /></a></p>    <h3>Morphing Cubes</h3>    <p class="image"><a href="/misc/goto?guid=4958202494325239132"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/ac3c8bc26911acca185c30c9bc5bb87a.jpg" width="470" height="260" /></a></p>    <h3>Falling Leaves</h3>    <p class="image"><a href="/misc/goto?guid=4958202495051867651"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/2231edd9ec5ff66891767d7cb6c0cc9f.jpg" width="470" height="260" /></a></p>    <h3>Animated Polaroid Gallery</h3>    <p class="image"><a href="/misc/goto?guid=4958202495803393048"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/28f97ecc94adb3baeed97a2bb5a9f116.jpg" width="470" height="260" /></a></p>    <h3>Spotlight Cast Shadow</h3>    <p class="image"><a href="/misc/goto?guid=4958201754733075964"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/8f05a373cc1b7f5a81b56a08a6cfc628.jpg" width="470" height="260" /></a></p>    <h3>Colorful Clock</h3>    <p class="image"><a href="/misc/goto?guid=4958202497208479733"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/566eb2dcfe1962bee73524a8c58b4022.jpg" width="470" height="260" /></a></p>    <h3>Lightbox Gallery (Draggable)</h3>    <p class="image"><a href="/misc/goto?guid=4958202497951102377"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/01f1867d0169fcc0f9002391c88bd29d.jpg" width="470" height="260" /></a></p>    <h3>Elastic Thumbnail Menu</h3>    <p class="image"><a href="/misc/goto?guid=4958189149233032026"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/e3ca4602cb8b519d9eb88620c1dfef50.jpg" width="470" height="260" /></a></p>    <h3>Coverflow</h3>    <p class="image"><a href="/misc/goto?guid=4958202499365620554"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/aaf7bf7fdc2db1f374a958413694c1b5.jpg" width="470" height="260" /></a></p>    <h3>Snowflakes</h3>    <p class="image"><a href="/misc/goto?guid=4958202500108058971"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/437bfd5f119fbcd0a957d157fcaf7c6d.jpg" width="470" height="260" /></a></p>    <h3>jQuery DJ Hero</h3>    <p class="image"><a href="/misc/goto?guid=4958202500841731282"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/2d1282e7b23ae068af31d77633d6293b.jpg" width="470" height="260" /></a></p>    <h3>Dynamic Stacking Cards</h3>    <p class="image"><a href="/misc/goto?guid=4958202501593226288"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/19e45e8288d3e9a389c5e4d4147e9cf9.jpg" width="470" height="260" /></a></p>    <h3>Another Image Gallery</h3>    <p class="image"><a href="/misc/goto?guid=4958202502327658399"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/0d74a093694241a9a195d3756dfe545a.jpg" width="470" height="260" /></a></p>    <h3>Snow Stack (Control With Arrow Keys)</h3>    <p class="image"><a href="/misc/goto?guid=4958202503064720699"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/7f83f61efd0fba7622ca3165954088d3.jpg" width="470" height="260" /></a></p>    <h3>Animated Pricing Column</h3>    <p class="image"><a href="/misc/goto?guid=4958202503816989943"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/ef2e2ef9b0734fdbb44e05bf0128acb2.jpg" width="470" height="260" /></a></p>    <h3>Slick jQuery Menu</h3>    <p class="image"><a href="/misc/goto?guid=4958202504552903613"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/3c320d09e034706add869efc6f3cf5a5.jpg" width="470" height="260" /></a></p>    <h3>CSS3</h3>    <p class="image"><a href="/misc/goto?guid=4958202505294987191"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/4a2f2e1c1c0c806605a4a9a062338e59.jpg" width="470" height="260" /></a></p>    <h3>CSS Tabs Without Javascript</h3>    <p class="image"><a href="/misc/goto?guid=4958202506034438550"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/9916b09a79942aca30e967369a95e043.jpg" width="470" height="260" /></a></p>    <h3>Tab Menus Without Javascript</h3>    <p class="image"><a href="/misc/goto?guid=4958186773331493415"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/fe77be072391398c8bde352e1be89730.jpg" width="470" height="260" /></a></p>    <h3>SVG Fisheye Menu</h3>    <p class="image"><a href="/misc/goto?guid=4958202507447458292"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/60f0267bdae5e3f36305eaa3ad0c3a9f.jpg" width="470" height="260" /></a></p>    <h3>Dynamic Presentation Without Flash</h3>    <p class="image"><a href="/misc/goto?guid=4958202508187034595"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/6083b883d1bd78b573ba1faca33abc1f.jpg" width="470" height="260" /></a></p>    <h3>Rotating Gallery</h3>    <p class="image"><a href="/misc/goto?guid=4958202508942189787"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/7f10d3ef4ae8d7c1d5c6f75bd9d715a9.jpg" width="470" height="260" /></a></p>    <h3>Dropdown Menu</h3>    <p class="image"><a href="/misc/goto?guid=4958202509685703807"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/815a15508c8cd8f9168e9be339dfda55.jpg" width="470" height="260" /></a></p>    <h3>Another Fisheye</h3>    <p class="image"><a href="/misc/goto?guid=4958202510427013942"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/8c4adf36669660e2f1a4935be264de45.jpg" width="470" height="260" /></a></p>    <h3>Frame-by-Frame Animation (Hover to Play)</h3>    <p class="image"><a href="/misc/goto?guid=4958202511171519835"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/0234e02a11a790d99ef35219d9684174.jpg" width="470" height="260" /></a></p>    <h3>Another Accordion</h3>    <p class="image"><a href="/misc/goto?guid=4958202511902094791"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/59e265f572b41a87328b21afe33ca33d.jpg" width="470" height="260" /></a></p>    <h3>AT-AT Walker (No Flash or Javascript)</h3>    <p class="image"><a href="/misc/goto?guid=4958202512645249048"><img alt="47 个 惊人的 CSS3 动画示例" src="https://simg.open-open.com/show/80b3226f891b37c4c013f786708efc53.jpg" width="470" height="260" /></a></p>