SEE Conf 2021!  支付宝体验科技大会

loading

CSS3制作动画加载页面

今天主要想和大家一起探讨一下如何使用CSS3制作页面加载内容的动画效果。听起来可能有点晕晕的,我简单的说一下吧,这种效果就是浏览器加载你的页面时,给页面的内容赋予一个动画效果,让他不在那么生硬。最早看过这种效果是小志Blog首页。今天特意看了一下志哥的写的代码,才知道实现起来并不是很困难的事情,不信大家一起来看看我扣出来的代码。

小志博客首页

别的我不多说,我直接使用firebug把志哥的Blog首页代码扒出来,下面我分为两部分:

HTML markup

Jquery和CSS3打造靓丽的动画进度条

今天在做项目中碰到一个需要用制作一个动画的进度条,一开始搞不清楚是怎么一回事,后在google中搜索了css progress bar,真的太多这样的资料,后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。

CSS Globe为我们提供了一种简易实现动画进度条的方法。只需要3个元素,1个内容块和2个内嵌元素即可实现一个漂亮的动态进度条效果。只是需要注意的 是,这个效果是比较漂亮,但并能实现实时载入。而是在页面首次载入的时候,会根据你的设置,以Gif动画的形式显示进度条的载入。也就是说,可以用来美 观,但不具有交互作用。如下图所示:

返回顶部