摘要: chart.js图表库案例赏析,饼图添加文字Chart.js 是一个令人印象深刻的JavaScript图表库,建立在HTML5Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5K... 阅读全文
posted @ 2015-10-24 16:53 siwenyu 阅读(750) 评论(0) 推荐(0) 编辑
摘要: 动画--过渡函数 transition-timing-functiontransition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:(单击图片可放大)案例展示:在hover状态下,让容器从一个正方形... 阅读全文
posted @ 2015-10-24 16:45 siwenyu 阅读(2822) 评论(0) 推荐(0) 编辑
摘要: chart.js图表库案例赏析,饼图添加文字 阅读全文
posted @ 2015-10-24 16:37 siwenyu 阅读(23953) 评论(1) 推荐(0) 编辑
摘要: 动画--过渡所需时间 transition-durationtransition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。案例演示:在鼠标悬停(hover)状态下,让容器从直角慢慢过渡到圆角,并让整个动画持续0.5s... 阅读全文
posted @ 2015-10-24 16:09 siwenyu 阅读(2486) 评论(0) 推荐(0) 编辑
摘要: 动画--过渡属性 transition-property早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦... 阅读全文
posted @ 2015-10-24 16:06 siwenyu 阅读(10189) 评论(0) 推荐(1) 编辑
摘要: 变形--原点 transform-origin任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴和Y轴的50%处。如下图所示:在没有重置transform-origin改变元素原点位置的情况下,CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。但很多时候,我们... 阅读全文
posted @ 2015-10-24 15:59 siwenyu 阅读(12374) 评论(1) 推荐(1) 编辑
摘要: 变形--矩阵 matrix()matrix()是一个含六个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵,我在这里只是简单的说一下CSS3中的t... 阅读全文
posted @ 2015-10-24 15:49 siwenyu 阅读(714) 评论(0) 推荐(0) 编辑