读书频道 > 网站 > 网页设计 > 深入理解Bootstrap
2.3.8 动画样式
14-05-08    奋斗的小年轻
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插立即去当当网订购

在Bootstrap里,动画样式应用得不是很多,只在进度条组件里会使用到。但是为了能够方便读者以后开发自定义组件,我们还是简述一下动画的定义,细节分析请阅读4.16节。

先来看一下动画是如何应用的:只需要在progress样式上应用一个active样式,即可开启动画过渡效果。示例代码如下所示:
<div class="progress progress-striped active">
    <div class="progress-bar" style="width: 45%">
        <span class="sr-only">45% Complete</span>
    </div>
</div>

上述代码的运行效果如图2-15所示。

 

在这里使用了active样式和progress样式叠加在一起产生动画过渡效果,我个人觉得active这个名称不太合适,因为状态样式里已经用过了。建议大家在做开发的时候设置一个别的名称,比如animation等。动画的定义也十分简单,只需要指定animation的名称和运行时间即可。本例的名称是progress-bar-stripes,关于progress-bar-stripes的详细定义请阅读4.16节。动画设置如下所示:
// 源码4551行
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
       /* 2秒过渡40像素,无限循环 */
          animation: progress-bar-stripes 2s linear infinite; /* 其他浏览器 */
}

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站