纯CSS手风琴效果

最新推荐文章于 2024-02-18 11:29:51 发布

原创

最新推荐文章于 2024-02-18 11:29:51 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

纯CSS手风琴效果

其效果出自《css3图解》一书中。起初本人通过理解和跟着敲demo可以完美的实现我们想要的css手风琴效果。

PS：它不需要js去完成手风琴动画，使用纯CSS进行完成，下面就是源码拷贝可正常使用。

以下为

源码CSS部分

.accordionMenu {
			width: 500px;
			margin: 0 auto;
			padding: 10px;
			background-size: #fff;
			color: #424242;
			font: 12px Arial, Verdana, sans-serif;
		}
		.accordionMenu h2 {
			position: relative;
			margin: 5px 0;
			padding: 0;
		}
		.accordionMenu h2:before { /*制作向下三角效果*/
			position: absolute;
			top: 15px;
			right: 10px;
			width: 0;
			height: 0;
			border: 5px solid #fff;
			border-color: #fff transparent transparent;
			content: "";
		}
		.accordionMenu h2 a { /*制作手风琴标题栏效果*/
			background: #8f8f8f;
			background: -moz-linear-gra