zoukankan      html  css  js  c++  java
  • css3实现的3D图片展示效果

          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">&bull; read tutorial &bull;</a></em>
       
      </div> 

          下载地址: http://www.lanrenzhijia.com/js/css3/2012/0715/572.html

          预览地址: http://www.lanrenzhijia.com/yulan/264/

          记得在支持CSS3版本浏览器下查看哦

  • 相关阅读:
    mysql 递归查询sql语句的实现
    Windows安装MySQL-5.6.13免安装版配置方法
    URL中的特殊字符处理
    Java序列化与反序列化
    url特殊字符转义及解决方法
    CentOs Mysql主从复制与读写分离
    java 转义特殊字符
    List列表中根据某一个字段,进行去重
    Spring定时任务的几种实现Quartz Timer task
    文件操作
  • 原文地址:https://www.cnblogs.com/lanrenzhijia/p/2597294.html
Copyright © 2011-2022 走看看