【CSS教程】用CSS3写的手风琴特效
时间:2016-09-01 17:01:02 已访问:181次
网站中很多的特效其实都是用CSS做成的,今天IT培训网讲的是用CSS做一个手风琴的特效,该手风琴特效设计时尚,颜色搭配非常好,每次点击手风琴项时都带有很酷的动画效果。
使用方法
HTML结构
该手风琴特效的每一个手风琴项使用的是元素和元素的组合。在元素中放置的是每一个手风琴项的具体内容。
CSS样式
手风琴的包裹元素div.app使用绝对定位,设置为固定的宽度和高度,以及一些阴影效果。同时使用帧动画来在页面加载时为手风琴添加一些放大和旋转的效果。
接着在每一个手风琴项中,使用checkBox hack技术来设置手风琴项选中和未选中时,手风琴项中的左右侧内容的动画效果。
至此,本次的手风琴特效就开发完了。大家说是不是很简单呢?