CSS手风琴效果

主体代码如下:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
                           </html>

CSS代码如下

利用了transition属性:

                                  ;               ;;                   }

因刚接触这个时间不久

如有不足的地方还请各位指出,

不胜感激 。

演示链接:

http://white-quality.qiniudn.com/index.html

下载地址 :

http://pan.baidu.com/s/1pJpyjyF

纯CSS手风琴效果的更多相关文章

  1. 纯CSS滑动效果

    原文地址:Pure CSS Slide Up and Slide Down 示例地址:Pure CSS Slide Demo 原文日期: 2013年08月26日 翻译日期: 2013年08月27日 如 ...

  2. 纯css抖动效果

    HTML: <button class="shake">按钮</button> CSS: .shake{ width: 120px; height: 33p ...

  3. 发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器(参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9741275927942612817)

    //css部分 body{ margin:; padding:; background: #262626; } .ring{ position: absolute; top:50%; left: 50 ...

  4. 纯CSS气泡效果

    http://www.liaoxuefeng.com/article/0013738937970388b6b6e5e5e2f4e21b65b01807c84ddf6000

  5. 纯css提示效果 提示层

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN"><HTML> <HEAD ...

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

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

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

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  8. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  9. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

随机推荐

  1. oracle的substr和replace

    //我个人做的是更新表中某个字段下的所有内容带有中文括号的信息变为英文括号,具体做法如下 update 表名 set 列名 =replace(要修改的字段名,要替换掉的内容,要替换上去的新内容) su ...

  2. hdu 4496 (并差集)

    题意:给出一个图,m条边,输出删除前i条边后该图的联通块的个数. 思路:刚开始想着是不是联通问题,后来看明白题意后知道,如果从最后一条边添加的话,答案就会出来了,就是并差集的操作. #include& ...

  3. Educational Codeforces Round 1(C. Nearest vectors)

    题目链接:http://codeforces.com/problemset/problem/598/C 题意是给你一个数n,下面n行,每行给你横坐标x和纵坐标y(x != 0 && y ...

  4. ADO.NET 快速入门(九):使用关系型数据

    DataSet 可以包含非关联表,也可以包含关联表.你可以把 DataSet 想象成一个文档数据.事实上,除了 DataSet 是基于层级模型的,其它和 XML 数据文档是一样的.由于数据通常存储在关 ...

  5. hihocoder #1224 : 赛车 dfs

    #1224 : 赛车 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/problemset/problem/1224 ...

  6. Codeforces Gym 100342D Problem D. Dinner Problem Dp+高精度

    Problem D. Dinner ProblemTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1003 ...

  7. lightOJ 1030(期望)

    题意:有一个迷宫是1×n的格子,一个人每到一个格子就能够把这个格子内的金子所有拿走,刚開始站在第1个格子,然后開始掷骰子得到点数x,他就要从当前位置走到加x的位置.假设发现位置是大于n的就又一次掷骰子 ...

  8. Delphi 7 升级到 Delphi 2010 总结

    1 字符串 >>string =unicodeString 字母的处理要定义AnsiString了 >>PChar =PWidechar >>str='普通汉字' ...

  9. boost.asio源码剖析(一) ---- 前 言

    * 前言 源码之前,了无秘密.                                                       ——侯捷 Boost库是一个可移植.提供源代码的C++库,作 ...

  10. Magical Forest

    Problem Description There is a forest can be seen as N * M grid. In this forest, there is some magic ...