html <div class="ball-box"> <div class="ball"> <div class="line1"> ...
有时浏览一些网站时在刚加载页面时候会出现一个滚动动画如下图,特别是对于一些移动端的站点或者混合应用来说应该用户体验会好很多,扒了下页面发现是用css样式控制的,于是把页面以及css样式赋值了下来, html如下 css样式如下 效果就出来了,不过别忘了页面加载完后隐藏额,不然会一直转到天亮,根本停不下来 这样页面加载或者异步提交表单时时不时感觉好多了 不管你信不信,反正我信了 ...
2016-01-23 10:28 0 2298 推荐指数:
html <div class="ball-box"> <div class="ball"> <div class="line1"> ...
demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙。 html结构很简单: 核心是一个ul,li列表,其中6个li通过不同的属性设置分别构成立方体的6个面,然后外围ul沿Y轴旋转 ...
参考博客:http://blog.jobbole.com/94966/ css代码: html: ...
html: 利用伪元素 css: ...
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享。效果如下面的图片 思路:1.制作之前呢,我们先来整理一下思路,这个圆轴轨迹上一共有八个圆。 仔细看的话,你会发现一个规律 ...
最近打算整理几个动画样式,最常见的就是我们用到的加载动画。加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来引用,这种方式最简单,也不会有兼容性的问题。不过本人有时爱折腾,看到一些动画的效果,不管是简单 ...
今天做的这个动画叫光盘旋转,名字自己取的。动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画。做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来。这个动画的实现也很简单,关键点在于如何将元素拼凑成风车形状。然后定义动画的关键帧为rotate 360度,应用于整个元素 ...
今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画。本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分享,如果有大牛能提出更好的实现方法,欢迎补充。案例请在chrome中查看。 这个动画的实现 ...