当前位置 : 首页> Web培训 > 【CSS教程】用CSS3写的手风琴特效

【CSS教程】用CSS3写的手风琴特效

时间:2016-09-01 17:01:02   已访问:181次
热门专业

网站中很多的特效其实都是用CSS做成的,今天IT培训网讲的是用CSS做一个手风琴的特效,该手风琴特效设计时尚,颜色搭配非常好,每次点击手风琴项时都带有很酷的动画效果。

【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

使用方法

HTML结构

该手风琴特效的每一个手风琴项使用的是元素和元素的组合。在元素中放置的是每一个手风琴项的具体内容。

【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

CSS样式

手风琴的包裹元素div.app使用绝对定位,设置为固定的宽度和高度,以及一些阴影效果。同时使用帧动画来在页面加载时为手风琴添加一些放大和旋转的效果。

【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

接着在每一个手风琴项中,使用checkBox hack技术来设置手风琴项选中和未选中时,手风琴项中的左右侧内容的动画效果。【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

【CSS教程】用CSS3写的手风琴特效_www.itpxw.cn

至此,本次的手风琴特效就开发完了。大家说是不是很简单呢?


推荐内容