首页 > 代码库 > 图片每天换及纯css3手风琴特效
图片每天换及纯css3手风琴特效
<a target="_blank" id="a"><img id="img" /></a> <script type="text/javascript"> var imgSrc = http://www.mamicode.com/new Date().getDate() +‘.jpg‘;>
手风琴特效:
css样式
#p1{ float:left; width:50px; height:200px; background-color:#000; transition:width 1s; } #p2{ float:left; width:50px; height:200px; background-color:#F00; transition:width 1s; } #p3{ float:left; width:50px; height:200px; background-color:#6F0; transition:width 1s; } #p4{ float:left; width:50px; height:200px; background-color:#00F; transition:width 1s; } #p1:hover{ width:400px} #p2:hover{ width:400px} #p3:hover{ width:400px} #p4:hover{ width:400px} #p5{ float:right; width:50px; height:200px; background-color:#000; transition:width 1s; } #p6{ float:right; width:50px; height:200px; background-color:#F00; transition:width 1s; } #p7{ float:right; width:50px; height:200px; background-color:#6F0; transition:width 1s; } #p8{ float:right; width:50px; height:200px; background-color:#00F; transition:width 1s; } #p5:hover{ width:400px} #p6:hover{ width:400px} #p7:hover{ width:400px} #p8:hover{ width:400px}
body程序:
<div style=" width:800px; height:200px;"> <div id="p1"></div> <div id="p2"></div> <div id="p3"></div> <div id="p4"></div> <div style="width:400px; height:200px; position: absolute; left:208px; background-color:#C00; z-index:-1"></div> <div id="p5"></div> <div id="p6"></div> <div id="p7"></div> <div id="p8"></div> </div>
图片每天换及纯css3手风琴特效
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。