15 拥有惊艳效果的 HTML5 和 CSS3 体验

fmms 10年前
     <div id="OSChina_News_24691" class="NewsContent TextContent NewsType2">     <p>看看下面这些界面的效果,令人难以置信的它们居然都是采用 HTML5 + CSS3 开发的!!!</p>     <h2>MADMANIMATION</h2>     <p><a title="MADMANIMATION" href="/misc/goto?guid=4958325179814463966" target="_blank">Demo</a><br /> <img style="width:578px;height:325px;" id="nor" class="aligncenter size-full wp-image-3834" title="madmanimation" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/462a4e761fb8c8685ea40609a2a07689.jpg" /></p>     <p> </p>     <h2>Bon Bon Buttons</h2>     <p><a title="Bon Bon Buttons" href="/misc/goto?guid=4958325180631936824" target="_blank">Demo</a> | <a title="Bon Bon Buttons" href="/misc/goto?guid=4958325180631936824" target="_blank">More Information</a><br /> <img style="width:581px;height:249px;" id="nor" class="aligncenter size-full wp-image-3826" title="bon-bon-buttons" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/17848f329178604ccca6b35b52a67742.jpg" /></p>     <p> </p>     <h2>Monster Cursor</h2>     <p><a title="Monster Cursor" href="/misc/goto?guid=4958325182152039753" target="_blank">Demo</a><br /> <img style="width:601px;height:430px;" id="nor" class="aligncenter size-full wp-image-3836" title="mosnter-cursor" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/25501b314fdbd59367d4ba0c822e90ad.jpg" /></p>     <p> </p>     <h2>3D Home</h2>     <p><a title="3D Home" href="/misc/goto?guid=4958325182951494486" target="_blank">Demo</a> | <a title="3D Home" href="/misc/goto?guid=4958325183747835508" target="_blank">More Information</a><br /> <img style="width:622px;height:295px;" id="nor" class="aligncenter size-full wp-image-3825" title="3d-city" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/37dd3d187d56ff8ecb2ce96f4f50ff0d.jpg" /></p>     <p> </p>     <h2>iOS Icons</h2>     <p><a title="iOS Icons" href="/misc/goto?guid=4958325184536513245" target="_blank">Demo</a> | <a title="iOS Icons" href="/misc/goto?guid=4958325185336997832" target="_blank">More Information</a><br /> <img style="width:561px;height:241px;" id="nor" class="aligncenter size-full wp-image-3830" title="ios-icons" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/fc33bfd1ea27cc935255fa52294afc96.jpg" /></p>     <p> </p>     <h2>Digital Clock</h2>     <p><a title="Digital Clock" href="/misc/goto?guid=4958325186127034163" target="_blank">Demo</a><br /> <img style="width:585px;height:261px;" id="nor" class="aligncenter size-full wp-image-3829" title="digital-clock-css3" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/12012842e51842dae065b824af874250.jpg" /></p>     <p> </p>     <h2>Spiderman</h2>     <p><a title="Spiderman" href="/misc/goto?guid=4958325186920826191" target="_blank">Demo</a> | <a title="Spiderman" href="/misc/goto?guid=4958325187706639053" target="_blank">More Information</a><br /> <img style="width:601px;height:475px;" id="nor" class="aligncenter size-full wp-image-3839" title="spiderman-css3" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/bd1360233be6d4f9af57d5cabe059a96.jpg" /></p>     <p> </p>     <h2>i Twitty the Fool</h2>     <p><a title="i Twitty the Fool" href="/misc/goto?guid=4958325188514167161" target="_blank">Demo</a><br /> <img style="width:601px;height:327px;" id="nor" class="aligncenter size-full wp-image-3832" title="i-twitty-the-fool" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/cd15cbd21ee8fe0c4eb3288fd9a8de3d.jpg" /></p>     <p> </p>     <h2>Solar System</h2>     <p><a title="Solar System" href="/misc/goto?guid=4958325189312963259" target="_blank">Demo</a> | <a title="Solar System" href="/misc/goto?guid=4958325190111876615" target="_blank">More Information</a><br /> <img style="width:543px;height:453px;" id="nor" class="aligncenter size-full wp-image-3838" title="solar-system-css3" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/e5b66af0f187ba5848ec778623847c4b.jpg" /></p>     <p> </p>     <h2>CSS3 Zoom</h2>     <p><a title="CSS3 Zoom" href="/misc/goto?guid=4958325190907512308" target="_blank">Demo</a> | <a title="CSS3 Zoom" href="/misc/goto?guid=4958325190907512308" target="_blank">More Information</a><br /> <img id="nor" class="aligncenter size-full wp-image-3828" title="css3-zoom" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/610fb1077894486d0a22d2c8ea76251f.jpg" width="521" height="521" /></p>     <p> </p>     <h2>iPhone Helix</h2>     <p><a title="iPhone Helix" href="/misc/goto?guid=4958325192434751274" target="_blank">Demo</a> | <a title="iPhone Helix" href="/misc/goto?guid=4958200726769308511" target="_blank">More Information</a><br /> <img style="width:584px;height:334px;" id="nor" class="aligncenter size-full wp-image-3827" title="css3-helix" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/459f8ce3221c6869d5917170af2e34b0.jpg" /></p>     <p> </p>     <h2>Mac OSX Finder</h2>     <p><a title="Mac OSX Finder" href="/misc/goto?guid=4958325193966234103" target="_blank">Demo</a><br /> <img style="width:570px;height:371px;" id="nor" class="aligncenter size-full wp-image-3833" title="mac-osx-finder" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/aeb8b8ecfb1eafc949baf9bf97e7017f.jpg" /></p>     <p> </p>     <h2>Social Media Icons</h2>     <p><a title="Social Media Icons" href="/misc/goto?guid=4958325194768704646" target="_blank">Demo</a> | <a title="Social Media Icons" href="/misc/goto?guid=4958325195566789857" target="_blank">More Information</a><br /> <img id="spl" class="size-full wp-image-3837 aligncenter" title="social-media-icons-css3" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/6e82d9a639ea97b83fbdecd7df5fe898.jpg" width="385" height="533" /></p>     <p> </p>     <h2>iPhone 3GS</h2>     <p><a title="iPhone 3GS" href="/misc/goto?guid=4958325196356459507" target="_blank">Demo</a> | <a title="iPhone 3GS" href="/misc/goto?guid=4958325197146715558" target="_blank">More Information</a><br /> <img id="spl" class="size-full wp-image-3831 aligncenter" title="iphone-3gs" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/705dd2d176ea56bf93853946a4000926.jpg" width="430" height="749" /></p>     <p> </p>     <h2>Morphing Cubes</h2>     <p><a title="Morphing Cubes" href="/misc/goto?guid=4958325197932609322" target="_blank">Demo</a><br /> <img style="width:529px;height:240px;" id="nor" class="aligncenter size-full wp-image-3835" title="morphing-cubes" alt="15 难以置信的 HTML5 和 CSS3 体验" src="https://simg.open-open.com/show/054f34b3cb983dff63337c6b534ef636.jpg" /></p>    </div>