transition:all 0.5s linear;进度条动画效果 制作原理
2016-07-19 09:29
381 查看
Html:
<span class="progress"><b ><i></i></b><em>50</em>%</span>
Css:
.progress b,.xsprogress b{border-radius: 15px; background-color: #eee;width:150px; height:13px;border:1px solid #dcdcdc; display:inline-block; margin-right:5px; position:relative; top:2px;}
.progress b i,.xsprogress b i{background-color:#a0ce14; width:1px; display:block;height:13px;border-radius: 13px 0 0 13px;transition:all 0.5s linear; }
Js:
$(".progress em").each(function(index, element) {
var progress_width = 150*$(this).text()/100; //宽度换算
$(this).parents(".progress").find("i").width(progress_width);
});
思路:
先把进度条样式写出来
然后动态给里面的进度一个宽度,使用css3 transition属性做个动画效果,transition 需要改变一个属性值就会有动画效果 ,这里改变的就是进度条里面的宽度
关键点:根据获取过来的百分比值,再计算相应的宽度
<span class="progress"><b ><i></i></b><em>50</em>%</span>
Css:
.progress b,.xsprogress b{border-radius: 15px; background-color: #eee;width:150px; height:13px;border:1px solid #dcdcdc; display:inline-block; margin-right:5px; position:relative; top:2px;}
.progress b i,.xsprogress b i{background-color:#a0ce14; width:1px; display:block;height:13px;border-radius: 13px 0 0 13px;transition:all 0.5s linear; }
Js:
$(".progress em").each(function(index, element) {
var progress_width = 150*$(this).text()/100; //宽度换算
$(this).parents(".progress").find("i").width(progress_width);
});
思路:
先把进度条样式写出来
然后动态给里面的进度一个宽度,使用css3 transition属性做个动画效果,transition 需要改变一个属性值就会有动画效果 ,这里改变的就是进度条里面的宽度
关键点:根据获取过来的百分比值,再计算相应的宽度
相关文章推荐
- 57. Spring 自定义properties升级篇【从零开始学Spring Boot】
- 【Unity Shader】第一节 最基本的shader---漫反射
- 码神第二次作业
- xcode5之前的旧项目适配iphone6和iphone6 plus
- Java异常处理和设计(转)
- Median Value
- 糖果
- Lua学习笔记-table转为字符串
- MySQL基本优化
- strstr()函数
- Emacs dired mode
- 我有病,得治!
- 高清晰度多媒体接口, HDMI 1.4介绍
- 怎么调试Hadoop源代码
- 字符串的全排列
- spring mvc:注解@ModelAttribute妙用
- http协议及httpd-2.2基本功能实现
- 数据结构—非二叉树存储结构(C语言实现)
- Android应用性能测试之CPU和内存占用
- <spark>集群環境創建