武林网(www.vevb.com)文章简介：在上周的文章里提到过要做个CSS3动画效果，因为最近一直在用虾米网听音乐，看到他们家首页那个flash的top banner设计的不错，于是突发奇想试用CSS3也制作一款差不多效果的相片墙，不过一些功能目前CSS还是无法支持，只能通过脚本来实现了，但整个作品的动画和构思都是通
在上周的文章里提到过要做个CSS3动画效果，因为最近一直在用虾米网听音乐，看到他们家首页那个flash的top banner设计的不错，于是突发奇想试用CSS3也制作一款差不多效果的相片墙，不过一些功能目前CSS还是无法支持，只能通过脚本来实现了，但整个作品的动画和构思都是通过CSS3来完成的，效果我也想当满意，ie8以下不支持，ie8部分支持，其他高级浏览器都没问题，我在demo里添加了上篇文章的浏览器支持图标表，一起来看下制作过程吧。View Demo
Step1. HTML代码
<div id="demo"><div class="col"><div class="big todos-thumb"><p><img src="img/loader.gif" data-src="img/5969313944_e5d6d67b23_s.gif" sizcache009759341109038932="6">Step2. CSS样式.col{ position: absolute; border-right:none; z-index:1; left:0; } .col1{ left: 51px; } .col2{ left: 102px; } .col3{ left: 153px; } .line { margin-top:51px; } .active { z-index: 10; opacity: 1; } .big:hover, .small:hover{ background:white; } .big{overflow: hidden; padding:1px;} .big p { width: 50px; height: 50px; line-height:1.3; z-index: 10; transition: all 0.2s ease-out; position: relative; cursor: pointer; } .big .icon-font{ float:left; } .big p img { width:50px; height:50px; float:left; } .lock-thumb .icon-font{ margin-left:25%; } .todos-thumb { background: rgb(255,255,255,0.1); } .todos-thumb:hover { background: #2FB1BE; color: #FFFFFF; box-shadow: 0 0 2px #333; } .col .todos-thumb { z-index:10; } .todos-thumb-span{ display: block; padding-left: 5em; } .todos-thumb p span{ width: 150px; padding-top: 5px; font-size: 1.2em; } .todos-thumb:hover p{ margin-right: 200px; }Step3. 插入脚本
$(document).ready(function(){ $("#demo .col").mouseenter(function(){ $(this).addClass("active"); $('.active').siblings().css("opacity", "0.4"); //除了加载到.active样式以外都改变其opacity }); $("#demo .col").mouseleave(function(){ $(this).removeClass("active"); $("#demo .col").css("opacity", "1"); }); });另外为了丰富相片墙的表现力，我添加了img load效果，用的是一款unveil的jQuery插件,使用方法为下:
<script type="text/javascript" src="js/jquery.unveil.min.js"></script> <script> $(function() { $("#demo img").unveil(300); //id为demo下的所有img图片 }); </script>Download
新闻热点
疑难解答
