Welcome, Old Sport!

CSS3仿虾米首页顶部banner的相片墙

by ilikecss ON 2013/05/20 24630

CSS3仿虾米首页顶部banner的相片墙在上周的文章里提到过要做个CSS3动画效果,因为最近一直在用虾米网听音乐,看到他们家首页那个flash的top banner设计的不错,于是突发奇想试用CSS3也制作一款差不多效果的相片墙,不过一些功能目前CSS还是无法支持,只能通过脚本来实现了,但整个作品的动画和构思都是通过CSS3来完成的,效果我也想当满意,ie8以下不支持,ie8部分支持,其他高级浏览器都没问题,我在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" alt="monaco see">
        <span class="todos-thumb-span">monaco see</span>
        </p>
        </div>
    </div><!-- col1 -->
    <div class="col col1">
        <div class="big todos-thumb">
        <p><img src="img/loader.gif" data-src="img/5913489167_1e78858455_s.gif" alt="the flower">
        <span class="todos-thumb-span">the flower</span>
        </p>
        </div>
    </div><!-- col2 -->
    <div class="col col2">
        <div class="big todos-thumb">
        <p><img src="img/loader.gif" data-src="img/5914033844_504a351fd4_m.gif" alt="Chapel Bridge">
        <span class="todos-thumb-span">Chapel Bridge</span>
        </p>
        </div>
    </div><!-- col3 -->
</div><!-- demo -->

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>

通过扫描二维码下载:

19条评论
  1. #1

    Matt说道:

    Good Job~ :neutral: :smile:

  2. #2

    yxiao说道:

    二维码挂了。

  3. #3

    josszhang说道:

    :razz: 效果真不错啊。

  4. #4

    Kayo说道:

    效果不错,还有一种带动画的,可以研究一下!

    • 是什么样子的?有参考吗?

      • Kayo说道:

        木有保存例子,其实样式跟你这个是差不多的,只是那个蓝色矩形是以动画的方式展开,而不是直接显示的!

  5. #5

    大发说道:

    可以放到读者墙上。

  6. #6

    啄木游弋说道:

    效果很赞,原创技术就是好啊 :grin:

  7. #7

    大发说道:

    你那个喜欢是用的I like this啊?

  8. #8

    野蛮人说道:

    很强大很漂亮~ :neutral:




TOP