09 2014 档案
摘要:这个动画改编自光盘旋转,前几个步骤一样,最后一步不同。光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角。1. 先看截图2. 代码实现思路2.1 首先还是定义四个元素,元素的中心为这四个元素组成的圆的圆心。这...
阅读全文
摘要:今天做的这个动画叫光盘旋转,名字自己取的。动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画。做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来。这个动画的实现也很简单,关键点在于如何将元素拼凑成风车形状。然后定义动画的关键帧为rotate 360度,应用于整个元素上,就可...
阅读全文
摘要:圆点旋转也是加载动画中经常用到的。其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式。圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现。这个实现也比较简单。1. 动画截图2.案例源代码 1 2 3 4 5 CSS3实现加载的动画效果4 6 7 8 9 38 ...
阅读全文
摘要:今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定。给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了。废话不多说,直接上图。1. 先看gif图2. 代码实现思路2.1 定义五个方块的元素。2.2 对方块元素使用动画,延时改变透明度。3. 主要使用的技术主要用到了ani...
阅读全文
摘要:上次简单的介绍了下如何用代码实现菊花旋转的加载动画,动画点击,这次继续我们的动画系列,实现另外一种加载动画,圆环旋转。与上次不同的是,菊花旋转是通过改变元素透明度来实现动画,这次因为考虑到元素叠加,加上元素本身带有背景色,如果改变透明度会影响效果,所以直接改变元素的背景颜色,加上适当的延时,就可以实...
阅读全文
摘要:最近打算整理几个动画样式,最常见的就是我们用到的加载动画。加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来引用,这种方式最简单,也不会有兼容性的问题。不过本人有时爱折腾,看到一些动画的效果,不管是简单也好,...
阅读全文
摘要:近期项目中遇到一个需求,从一个列表中随机展示列表的部分内容,需求不大,JS也非常容易实现。主要是运用到了Math对象的random方法,和Array的splice方法。思路是先新建一个数组,存放所有的列表,然后算出随机数,从数组中取出这个随机索引对应的值,然后组成一个随机数组。源代码如下: 1 2...
阅读全文