http://blog.csdn.net/millia/article/details/11595583
可以参照这个试试.....
纯CSS是写不出可以带动画效果页面的。你需要加入JavaScript这类可以对DOM进行控制的脚本才可以。
如果你还不懂得，完全可以到网上去找一些成型的作品拿来使用。
这些代码用起来难度也不是很高。
追问
JavaScript会出现兼容问题吗，ie怎么支持png啊
追答
Javascript也存在兼容性的问题，另外，IE6对png的支持不是很好，IE7及以上就不存在这样的问题了，
但需要说的是，IE6对Png的支持好不好与JavaScript没有关系，就是浏览器的问题。
针对IE对Png透明支持不好的问题，目前没有太好的办法，也有使用JS加载外部处理程序解决的，但同样的，也会消耗大量的资源做为代价，所以，最好的办法是不用PNG，而改用GIF，这是现在最常用的方法，其实GIF图做得好了，和PNG不差什么。
html{height: 100%
}
html *{
box-sizing: border-box
}
body{
position: relative
height: 100%
margin: 0
}
.box{
position: absolute
top: 0left: 0right: 0bottom: 0
width: 302px
height: 300px
margin: auto
border: 1px solid #dfdfdf
}
input{
position: absolute
top: 0
left: 0
width: 0
height: 0
opacity: 0
}
.head{
width: 100%
height: 60px
border-bottom: 1px solid #dfdfdf
}
.head label{
display: block
width: 100px
height: 100%
text-align: center
line-height: 60px
float: left
border-right: 1px solid #dfdfdf
}
.head label:last-child{
border: none
}
.content{
display: none
position: absolute
top: 60px
left: 0
width: 100%
height: 240px
background-color: #f3f3f3
}
#tag1:checked + .content,
#tag2:checked + .content,
#tag3:checked + .content{
display: block
}
#tag1:checked ~ .head label:nth-child(1),
#tag2:checked ~ .head label:nth-child(2),
#tag3:checked ~ .head label:nth-child(3){
background-color: #000
color: #fff
} <div class="box">
<input type="radio" id="tag1" name="tag" checked />
<div class="content">
this is tag1
</div>
<input type="radio" id="tag2" name="tag" />
<div class="content">
this is tag2
</div>
<input type="radio" id="tag3" name="tag" />
<div class="content">
this is tag3
</div>
<div class="head">
<label for="tag1">1</label>
<label for="tag2">2</label>
<label for="tag3">3</label>
</div>
</div>
