纯css手风琴效果

 1 <!doctype html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>纯css写的一个手风琴效果供大家学习</title>
 6     <style>
 7         * { margin: 0; padding: 0; }
 8         body{background: #eee}
 9         .e-warp { width: 600px; height: 250px; overflow: hidden; margin: 100px auto; border-radius: 5px; box-shadow: 0 0 10px #999; }
10         .e-warp li{ float: left; width: 120px; height: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.5); list-style: none; width: 50px;
11                     -webkit-transition:width 0.5s ease-out;
12                     -moz-transition:width 0.5s ease-out;
13                     transition:width 0.5s ease-out;
14                    }
15         .e-warp li:first-child { width: 400px; }
16         .e-warp li:hover { width: 400px; }
17         .e-warp:hover li:not(:hover) { width: 50px; }
18     </style>
19 </head>
20 <body>
21 <ul class="e-warp">
22     <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9NEJzZkNKeDZHJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
23     <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9TXNVRmFHZDFrJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
24     <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9RHZJUW5hT096JmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
25     <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9dWZGR29IZmFpJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
26     <li><a href="#"><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAveS5waG90by5xcS5jb20vaW1nP3M9MUFxSjRyNWZzJmFtcDtsPXkuanBn.jpg" alt="e-"/></a></li>
27 </ul>
28 </body>
29 </html>
时间: 2024-10-09 23:13:03

纯css手风琴效果的相关文章

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享 /*改写chinaobd2.com Begin*/ /*如有定义header, footer 注意设置相应的位置,颜色等*/ body { padding-top: 0px; } @media (max-width: 577px) { body { padding-top: 35px; } } /*应用效果:未应用效果时可直接清除*/ @media (min-width: 768px) { header { background: #0064A

简单实用的纯css按钮效果

在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者.下面就是一个纯css按钮,需要的可以参考. css代码 .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white

纯css抖动效果

HTML: 1 <button class="shake">按钮</button> CSS: 1 .shake{ 2 width: 120px; 3 height: 33px; 4 border-radius: 66px; 5 background-color: #00ff00; 6 border: 0; 7 color: #fff; 8 font-weight: bold; 9 } 10 /* shake 按钮抖动 */ 11 .shake:hover { 1

纯CSS3手风琴效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>squeezebox</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 body{ 12 padding:100px; 13 } 14 li{ 15 list-st

纯css提示效果 提示层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META NAM

纯js和纯css+html制作的手风琴的效果

一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;list-style: none;} #div{width: 1180px;height: 405px;bo

纯css手写手风琴

---恢复内容开始--- 在网页中我们经常会遇到手风琴效果,之前经常会用jQuery和JavaScript来写,但今天给大家介绍一种用纯css写的手风琴. 下面是html部分: 1 <div class="togglebox"> 2 <input id="toggle1" type="radio" name="toggle" checked="checked" /> <!--c

利用target的特性,可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

纯css3实现美化复选框和手风琴效果(详细)

关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用before模拟选框的框,用after来模拟选框的填充 通过 .magic-checkbox:checked + label:after {/*选框被选中时 显示after填充*/ display: block; } 来确定是否选中复选框,如果checked就把after的显示. 先贴出html的代码 <