使用css3实现小菊花加载效果

  最常见的就是我们用到的加载动画。加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式,当做背景图或是img标签来引用,这种方式最简单,也不会有兼容性的问题。不过最近再捣鼓CSS,看到一些动画的效果,不管是简单也好,复杂也好,就是想尝试用代码来实现它,换一种思维方式,就算在项目中用到的可能性很小,自己多动手多写写总归不会有坏处。

  CSS3新增了很多强大的功能,虽然会有兼容性的问题,但是阻挡不了我们去使用它的这些新特性。像一些简单的动画以前靠画图工具来实现,现在单纯用CSS也能非常简单的实现。下面的案例就是利用CSS加html如何实现菊花旋转的动画。

HTML代码如下: 

 1 <div class="wrapper">
 2      <div class="line1"></div>
 3      <div class="line2"></div>
 4      <div class="line3"></div>
 5      <div class="line4"></div>
 6      <div class="line5"></div>
 7      <div class="line6"></div>
 8      <div class="line7"></div>
 9      <div class="line8"></div>
10      <div class="line9"></div>
11      <div class="line10"></div>
12      <div class="line11"></div>
13      <div class="line12"></div>
14 </div>

CSS代码如下:

 1 @-webkit-keyframes loading {
 2   from {opacity: 1;width:3px;height:20px;}
 3   to {opacity: 0.25;width:3px;height:20px;}
 4 }
 5 div.wrapper {
 6   position: absolute;
 7   //top:50%;
 8   left:50%;
 9   display: inline-block;
10   zoom: 0.3; /*通过修改这个值(值的区间为0-1)的大小来设置菊花的大小*/
11 }
12 div.wrapper div {
13   width:3px;
14   height:16px;
15   background: #a4a2a4;
16   position: absolute;
17   left: 100%;
18   top: 100%;
19   opacity: 0;
20
21   -webkit-animation: loading 1.2s linear infinite;
22 }
23 div.wrapper div.line1 {-webkit-transform:rotate(0deg) translate(0, -34px); -webkit-animation-delay: 0s;}
24 div.wrapper div.line2 {-webkit-transform:rotate(30deg) translate(0, -34px); -webkit-animation-delay: 0.1s;}
25 div.wrapper div.line3 {-webkit-transform:rotate(60deg) translate(0, -34px); -webkit-animation-delay: 0.2s;}
26 div.wrapper div.line4 {-webkit-transform:rotate(90deg) translate(0, -34px); -webkit-animation-delay: 0.3s;}
27 div.wrapper div.line5 {-webkit-transform:rotate(120deg) translate(0, -34px); -webkit-animation-delay: 0.4s;}
28 div.wrapper div.line6 {-webkit-transform:rotate(150deg) translate(0, -34px); -webkit-animation-delay: 0.5s;}
29 div.wrapper div.line7 {-webkit-transform:rotate(180deg) translate(0, -34px); -webkit-animation-delay: 0.6s;}
30 div.wrapper div.line8 {-webkit-transform:rotate(210deg) translate(0, -34px); -webkit-animation-delay: 0.7s;}
31 div.wrapper div.line9 {-webkit-transform:rotate(240deg) translate(0, -34px); -webkit-animation-delay: 0.8s;}
32 div.wrapper div.line10 {-webkit-transform:rotate(270deg) translate(0, -34px); -webkit-animation-delay: 0.9s;}
33 div.wrapper div.line11 {-webkit-transform:rotate(300deg) translate(0, -34px); -webkit-animation-delay: 1.0s;}
34 div.wrapper div.line12 {-webkit-transform:rotate(330deg) translate(0, -34px); -webkit-animation-delay: 1.1s;}
时间: 2024-11-14 12:22:40

使用css3实现小菊花加载效果的相关文章

超酷的CSS3网页加载效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

加载效果(遮罩)

前几天,有群友在问bootstrap的加载效果用什么组件.其实百度搜索一下,也能找到很多的结果.在此,博主根据自己的使用经历分享下几个加载的小组件,希望大家用得着.主要分为实用型和炫酷型两种.实用型效果一般,但能适用各种浏览器:炫酷型使用最新的css3和html5写出来的,效果很炫,但基本上低版本的IE(10以下)都不能兼容. 回到顶部 一.实用型 1.PerfectLoading组件 这个组件是博主在网上找到的一个js,但下载下来之后发现一些大大小小的问题,于是,博主改写了下,命名为boots

一款纯css3实现的条纹加载条

之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="warning"> </div> </div> css3代码: .warning { posi

简易仿ios菊花加载loading图

原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loading,一般用的比较多的是仿照ios 的菊花加载loading 图,当然一些条件下还会涉及到加载成功/ 失败情况的显示,还有显示文字. 使用ProgressBar 来加载动画转圈,这里使用drawable文件 定义转圈动画,indeterminateDrawable属性进行加载. <?xml vers

Jquery页面加载效果

1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false).本文地址:http://www.cnblogs.com/lengzhan/p/6423312.html 2.代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

一款纯css3实现的动画加载导航

之前为大家介绍了好几款导航菜单,今天为给大家再带来一款纯css3实现的动画加载导航.该导航出现的时候以动画的形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="main-menu"> <li class="main-menu-item active"><a href="#">Home</a></li><li class="m

Android 下拉刷新上拉加载效果功能,使用开源项目android-pulltorefresh实现

应用场景: 在App开发中,对于信息的获取与演示,不可能全部将其获取与演示,为了在用户使用中,给予用户以友好.方便的用户体验,以滑动.下拉的效果动态加载数据的要求就会出现.为此,该效果功能就需要应用到所需要的展示页面中. 知识点介绍: 本文主要根据开源项目android-pulltorefresh展开介绍. android-pulltorefresh [一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.G

纯css3实现的动画加载条

之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrapper"> <div class="bar"> <p class="text"> Loading b

时尚设计!三种奇特的网格加载效果【附源码下载】

如果你看过三星企业设计中心网站,你肯定已经注意到了时尚的网格加载效果.每一项加载的时候,背景色会首先滑出,然后图像显现出来.滑动颜色表示图像,也就是说它是彩色图像的主色. 在这篇文章中,我们想向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果.另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safar