CSS3实现手风琴效果-------Day88
所谓的手风琴效果,就是像手风琴一样拉开关上,至于手风琴啥样,貌似那是我好久之前的回忆了。
不扯那些没用的,说说这个坑人的手风琴效果,先来看下效果图:
这个效果不错吧,也比较常用吧,可怜的我最开始的时候以为自己可以做到这个效果,就用display:none/block写了一排的div,你别说,还真出来那个感觉啦,哈哈,这里当然不会这么做,但是在我看明白之后,发现是一样简单到要吐血,这样的应用当初自己怎么就想不到。
实现过程中的第一个让我没想到,却感觉确实这样才对的地方:
<div id="here"> <ul> <li> <div><img src="back.jpg"></img></div> </li> <li> <div><img src="run.gif"></img></div>乐滋滋 </li> <li> 这一行打开打开打开打开 芝麻开门********************* </li> <li> 菠萝菠萝蜜 月光宝盒 我穿穿穿--------------------- </li> <li> <div><img src="run.gif"></img> 喜滋滋 <div style="float:left;"><img src="run.gif"></img></div> </li> <li> <div><img src="run.gif"></img> </div>美滋滋 </li> </ul> </div>在动态的导航栏中也用到了ul/li,这些地方的活用才是学习的关键吧。来看下效果:
然后我们来进行设置,首先设置最外围的div,我们需要一个宽600*高400的空间
#here{ width:600px; height:400px; margin-top: 25px; box-shadow: 0 0 10px 2px rgba(0,0,0,0.3); overflow: hidden; }然后我们就来设置里面的无序列表ul/li啦
#here ul{ width:1000px;} #here li{ display:block; background:blue; width:100px; height: 400px; position: relative; float: left; border-left: 1px solid #aaa; box-shadow: 0 0 25px 10px rgba(0,0,0,0.4); -moz-transition:all 0.3s; -webkit-transition:all 0.3s; transition:all 0.3s; }这里我们就知道了,我们要利用的就是transition的效果,但是该如何更好的应用这个效果呢,其实就这么轻飘飘的一句话,看仔细了哦
#here ul:hover li{ width: 40px;} #here ul li:hover{ width:400px;}就是这么简单,当你鼠标所在的li执行hover的时候,其他的li则执行ul:hover li,这个想法很巧妙啊,当然这里我们还要注意宽度的有效距离,举个例子来说:
总宽度600=每个li的宽度100*6;
鼠标放上后,总宽度600<=一个变宽的li400+5*变窄的li40;
当然这里可能会出现一个问题,一个li变窄的过程只需由100改为40,而变宽则由100改为了400,在最后面一个如果拖动过快的话,可能会出现问题,这个问题该如何解决呢,当前我只能尽量保持变宽和变窄的频率是同步的,这里是5个变窄,1个变宽的频率哦,另外我们来看下打开后需要注意什么
是什么呢,看那些周边的字啊,这就是响应式嘛,哈哈...
再来回味下这个实现中的所得:
1、无序列表的活用;
2、ul:hover li和ul li:hover这个实现的关键点;
3、overflow:hidden;在这个应用里,它功不可没;
好了,周末,该早休息一次了
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。