web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
Bootstrap3扁平风格垂直手风琴特效
分类:
导航菜单
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
使用该手风琴特效需要在页面中引入bootstrap v3版本的相关文件和jquery文件。另外,手风琴的图标使用了谷歌的Material+Icons字体,使用是也要将其引入。 ```html
``` ##### HTML结构 该垂直手风琴使用bootstrap的网格系统来控制大小,HTML结构采用Bootstrap Accordion的HTML结构。 ```html
Default collapse with scaling icon
Collapse item #1
......
......
``` ##### CSS样式 在CSS样式中,只是简单的设置了一些基本样式。并为每个手风琴项的头部设置动画过渡效果。另外还设置了2中图标在激活状态时的动画效果。 ```html /* #bs-collapse icon scale option */ .panel-heading a:before { content: '\e146'; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; font-size: 24px; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: scale(1); transform: scale(1); } .panel-heading.active a:before { content: ' '; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); } #bs-collapse .panel-heading a:after { content: ' '; font-size: 24px; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 0.5s; transition: all 0.5s; } #bs-collapse .panel-heading.active a:after { content: '\e909'; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 0.5s; transition: all 0.5s; } /* #accordion rotate icon option */ #accordion .panel-heading a:before { content: '\e316'; font-size: 24px; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.5s; transition: all 0.5s; } #accordion .panel-heading.active a:before { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.5s; transition: all 0.5s; } ``` ##### JavaScript 该手风琴特效使用jQuery代码来为相应的手风琴项在展开和收缩时添加和删除相应的class类。 ```html $(document).ready(function() { $('.collapse.in').prev('.panel-heading').addClass('active'); $('#accordion, #bs-collapse') .on('show.bs.collapse', function(a) { $(a.target).prev('.panel-heading').addClass('active'); }) .on('hide.bs.collapse', function(a) { $(a.target).prev('.panel-heading').removeClass('active'); }); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告