css3实现的3D图片展示效果

最新推荐文章于 2022-04-19 16:53:58 发布

weixin_30699831

最新推荐文章于 2022-04-19 16:53:58 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lanrenzhijia/archive/2012/07/18/2597294.html

本文介绍了一段使用CSS3实现的立体动态图片展示特效代码，包括图片自动闪烁的效果，易于修改和应用。提供下载和预览链接，确保在支持CSS3的浏览器中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3的趋势越来越近了，相信前面的你使用的safari浏览器，火狐都已经支持了，里面的一些CSS3实现的特效貌似都已经代替javascript代码了，flash更不用说了，直接被替代掉了。

废话不多说了，大家来看今天我给大家推荐的第一篇特效代码，截图如下：

打开后，图片会自己在那里闪动，很立体

代码也是很简单修改的，只要调用几个JS，除此外加如下一段代码即可

<div id="container">

    <div class="wrapper-item">
    <div class="left">
        <img src="images/item/blogfolio.jpg" alt="Blogfolio" />
        <img src="images/item/folo.jpg" alt="Folo" />
      </div>
      <span class="text">Lot of awesome themes! <br/> Download the lovely one! </span>
      <div class="right">
        <img src="images/item/grido.jpg" alt="Grido" />
        <img src="images/item/itheme2.jpg" alt="Itheme2" />
      </div>
    </div>
    <div class="wrapper-item">
      <div class="left">
        <img src="images/item/koi.jpg" alt="Koi" />
        <img src="images/item/notes.jpg" alt="Notes" />
      </div>
      <span class="text">You can choose skin too! <br/> Choose the one you love! </span>
      <div class="right">
        <img src="images/item/shopdock.jpg" alt="Shopdock" />
        <img src="images/item/wumblr.jpg" alt="Wumblr" />
      </div>
    </div>

    <nav id="navigation">
      <a href="#1" class="nav selected">1</a>
      <a href="#2" class="nav">2</a>
    </nav>
    <span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
    <h1>Showcase Product Feature in 3D Style</h1>
    <em><a href="http://www.lanrenzhijia.com">• read tutorial •</a></em>

</div>