1、看了网上很多关于css的手风琴案例，但是都没有讲到相关的原理。

主要原理1. 利用target属性。2.锚点链接。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style>
*{transition:all 2s linear}
ul{wdith:700px;}
li{list-style:none;margin-bottom:20px;width:700px}
li a{color:#fff;text-decoration:none;width:700px;height:50px;border-radius:20px;padding: 0 10px;line-height:50px;display:block;position:relative;text-shadow:2px 2px 1px #eee;font-size:30px;font-weight:900;background:linear-gradient(to right,#999,#FFC,#F6F)}

span{border:5px solid transparent; border-top-color:#fff;border-bottom:none;width:0;position:absolute;top:23px;right:5px; transition: all 1s linear}
li a:hover{background:linear-gradient(to left,#F99, #FC3, #93C)}
a:hover span{transform:rotate(-90deg)}
p{width:100%;height:0;overflow:hidden}
p:target{height:150px;transition:all 0.5s linear;}

/*将四个角的颜色都写出来，可以看出来，是在这个正方形的中心点旋转的，当旋转90deg时，上面的角会到右边,所以看起来像下来的感觉

当下边框不存在的时候，高度会发生变化，中心点也会发生变化*/
</style>
</head>

<body>
<ul>
<li>
<a href="#one">brand<span></span></a>
<p id="one">》《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗</p>
</li>
<li>
<a href="#two">brand<span></span></a>
<p id="two">》《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗</p>
</li>
<li>
<a href="#three">brand<span></span></a>
<p id="three">》《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗</p>
</li>
</ul>
</body>
</html>

css3 手风琴的更多相关文章

  1. 一步步教你css3手风琴效果的实现

    什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...

  2. 纯CSS3手风琴图片滑动特效

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 制作CSS3制作手风琴图片滑动效果,我们仅 ...

  3. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  4. HTML CSS3 手风琴菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel= ...

  5. CSS3手风琴下拉菜单

    在线演示 本地下载

  6. CSS3手风琴菜单 可同时折叠多个菜单

    在线演示 本地下载

  7. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  8. javascript效果：手风琴、轮播图、图片滑动

    最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...

  9. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

随机推荐

  1. JS AJAX 跨域

    原因: 浏览器的同源策略,不允许AJAX 访问 其他接口 协议,域名,端口 一个不同 就跨域了  http 端口(80) https(443) 可以跨域的三个标签: 1. img : 打点统计,没有浏 ...

  2. 那些年我们跳过的 IE坑

    一,  IE input X 去掉文本框的叉叉和密码输入框的眼睛图标 解:    从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清 ...

  3. vue菜鸟从业记：完成项目最后一公里之真机测试和打包上线

    最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数 ...

  4. git-format-patch

    使用方法: git diff ${old-commit} ${new-commit} > commit-operation.patch OR git format- b1af44f > c ...

  5. 输入正整数n，求各位数字和

    import java.util.Scanner; /** * @author:(LiberHome) * @date:Created in 2019/3/5 10:24 * @description ...

  6. 移动端无法复制：使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  7. foreach next 操作数组指针移动问题

    2018年10月20日10:39:40 先说结论,foreach 维护的是一套属于自己的数组指针 会在操作数据的时候,分裂一套变量地址,即使你强制使用 & 取地址一样会分裂,不会引用同一套指针 ...

  8. CS（计算机科学）知识体

    附 录 A                   CS( 计算机科学)知识体 计算教程 2001 报告的这篇附录定义了计算机科学本科教学计划中可能讲授的知识领域.该分类方案的依据及其历史.结构和应用的其 ...

  9. Tengine+Lua+GraphicsMagick

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! 使用 Tengine+Lua+GraphicsMagick 实现图片自动裁剪缩放 需求 : 图片 ...

  10. 继承 & 多态 & 封装

    什么是继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 python中类的继承分为:单继承和多继承 class Par ...