css3加载中动画效果,CSS3实现加载中的动画效果

Loading 的菊花图形组合的不太好,基本上实现这个功能了

动画解析

这个动画用到的 CSS3 特性:

transform 主要使用 transform 属性的 rotate,将线条组合成 Loading 图形 (也就是常见的菊花图形)

animation 实现将线条颜色由浅到深,再由深到浅来回变换的动画,通过 animation-delay 属性来使颜色的变换产生过渡的效果,从而达到类似于 Loading 动画的效果

效果实例

HTML Code

CSS Code

.loading {

width: 80px;

height: 60px;

margin: 0 auto;

position: relative;

}

span {

width: 4px;

height: 20px;

background-color: #ccc;

position: absolute;

left: 38px;

-webkit-animation: loading 1s infinite;

}

.line1 {

background-color: #000;

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

-webkit-animation-delay: .3s;

}

.line2 {

top: 5px;

left: 52px;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-animation-delay: .4s;

}

.line3 {

top: 18px;

left: 57px;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

-webkit-animation-delay: .5s;

}

.line4 {

top: 31px;

left: 52px;

-webkit-transform: rotate(135deg);

transform: rotate(135deg);

-webkit-animation-delay: .6s;

}

.line5 {

top: 37px;

-webkit-animation-delay: .7s;

}

.line6 {

top: 32px;

left: 24px;

-webkit-transform: rotate(-135deg);

transform: rotate(-135deg);

-webkit-animation-delay: .8s;

}

.line7 {

top: 18px;

left: 19px;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

-webkit-animation-delay: .9s;

}

.line8 {

top: 5px;

left: 24px;

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-animation-delay: 1s;

}

@-webkit-keyframes loading {

0% {

background-color: #ccc;

}

50% {

background-color: #000;

}

100% {

background-color: #ccc;

}

}

效果示图

8c7f28f71ca6a46f99fd2d189940b98f.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438678.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[你必须知道的.NET]第三十五回,判断dll是debug还是release,这是个问题

问题的提出 晚上翻着群里的聊天,发现一个有趣的问题:如何通过编码方式来判断一个dll或者exe为debug build还是release build?由于没有太多的讨论,所以我只好自己找点儿办法,试图解决这个问题,为夜生活带点…

执行本地sql_实用!5个在线 SQL 数据库环境

文章目录SQL FiddleDB Fiddledb<>fiddleSQL OnlineOracle Live SQL总结大今天给大家分享几个在线的免费 SQL 运行环境&#xff0c;也就是在线数据库。这些网站可以帮助我们快速运行一些 SQL 语句的测试或者验证&#xff0c;同时还可以在网络上进行分享&#xff0c;关键不…

网页传世服务器端,传世服务端文件分析

DB (数据库)baobao.db 宝宝(佩带套装引发&#xff0c;需设置套装属性)EvilMon.db 心魔Magic.db 技能Monster 怪物StdItems 装备&#xff0c;道具&#xff0c;物品说明&#xff1a;装备攻击、魔法、道术、等等Dbserver (数据服务器)Backup空ClearLog空Connection空FDBBackup数据…

ocp证书怎么考_没有基础怎么考初级会计证书?

初级会计证书这些年来越发火热&#xff0c;报考门槛也较低。多数报考初级会计证的考生都是没有基础的&#xff0c;那么怎么复习呢?今天会计网将给大家带来没有基础怎么考初级会计证书?1、制定一份适合自己的学习计划&#xff0c;分阶段学习对于没有基础的考生而言&#xff0c…

oracle sparc 服务器系统,OracleSPARC服务器基础.PDF

OracleSPARC服务器基础Oracle SPARC服务器基础及管理Agenda1. 服务器运行环境标准2. Oracle Sparc T5140维护与ILOM管理3. Oracle Solaris 基础4. 收集日志、故障分析、解决和案例分享2SPARC T5140环境输入电压 100 - 240 VAC, 50-60Hz8.3 - 7.2 A 100-120 VAC (max)输入电流4…

C#设计模式(23种设计模式)

创建型&#xff1a; 1. 单件模式(Singleton Pattern) 2. 抽象工厂&#xff08;Abstract Factory&#xff09; 3. 建造者模式(Builder) 4. 工厂方法模式&#xff08;Factory Method) 5. 原型模式(Prototype) 结构型&#xff1a; …

与gps优缺点_长缨在手,敢缚苍龙,中国北斗三号圆满收官,相比美国GPS怎样?...

2020年6月23日&#xff0c;北斗三号最后一颗全球组网卫星发射成功&#xff0c;完美收官。我们都知道信息化时代定位导航的重要性&#xff0c;那么中国北斗和美国GPS相对比怎么样呢&#xff1f;首先来了解一下北斗。中国的北斗导航系统是分三步建设的。卫星导航系统第一步在1994…

类似ajax封装函数,JS 封装一个async式的AJAX函数

其实也没什么&#xff0c;就是用上ES7的异步函数&#xff0c;让ajax使用起来更方便。这个方便主要是体现在&#xff1a;无回调 & 无then链式 & 轻松收集异常。大致分3步&#xff1a;1、封装API类(这步不用异步函数)这一步一般会单独建立一个文件&#xff01;// 定义一个…

11单件模式(Singleton Pattern)

创建型模式---单件模式(Singleton Pattern)动机&#xff08;Motivation): 在软件系统中&#xff0c;经常有这样一些特殊的类&#xff0c;必须保证它们在系统中只存在一个实例&#xff0c;才能确保它们的逻辑正确性、以及良好的效率。 如何绕过常规的构造器&#xff0c;…

查找字符位置_如何使用find函数和search函数精确查找字符

精确查找指定字符在一个字符串中的位置是Excel函数运用中的一项重要的技巧&#xff0c;尤其是在截取字符串、替换字符串等文本处理过程中&#xff0c;精确定位技术更是必不可少。查找字符的主要函数是find函数和search函数&#xff0c;两者的语法完全相同。find(find_text,with…

梦幻新开服务器维护,梦幻西游1月新区2017 1月新开服务器介绍

梦幻西游1月新区2016有什么呢&#xff0c;这个月的新开服务器已经出来了&#xff0c;很多朋友已经邀上自己的小伙伴们开战了&#xff0c;有的还没放假就等着下个月的新区了&#xff0c;下面我们就来看。梦幻西游1月新区2016&#xff1a;转眼步入2016年&#xff0c;在2016年1月份…

12抽象工厂(Abstract Factory)

常规的对象创建方法&#xff1a; //创建一个Road对象 Road road new Road(); new 的问题&#xff1a; 实现依赖&#xff0c;不能应对“具体实例化类型”的变化。解决思路&#xff1a; 封装变化点-----哪里变化&#xff0c;封装哪里 潜台词&#xff1a; 如果没有变…

typeahead有什么作用_typeahead使用配置参数。

示例代码&#xff1a;var suggestion_source new Bloodhound({datumTokenizer: Bloodhound.tokenizers.obj.whitespace("display_name"),queryTokenizer: Bloodhound.tokenizers.whitespace,remote: {url: "http://nominatim.openstreetmap.org/search?format…

dhcp服务器能为客户端提供哪些信息,为DHCP客户端提供DHCP服务器的MAC [关闭]

Background info:我有一套专有的嵌入式Linux网络设备&#xff0c;其中一个将配置为DHCP服务器&#xff0c;其余的将是DHCP客户端 .我需要让客户端设备只接受来自服务器设备的DHCP租约&#xff0c;忽略同一LAN上其他DHCP服务器提供的任何其他租约 . 同样&#xff0c;我需要使服务…

13建造者模式(Builder)

Builder模式的缘起&#xff1a; 假设创建游戏中的一个房屋House设施&#xff0c;该房屋的构建由几部分组成&#xff0c;且各个部分富于变化。如果使用最直观的设计方法&#xff0c;每一个房屋部分的变化&#xff0c;都将导致房屋构建的重新修正.....动机&#xff08;Motiva…

mongo更新数组字段_更新mongodb中嵌套数组中的几个字段(使用pymongo)

我正在尝试更新数组内数组中的一些字段示例文档如下&#xff1a;{id: 987654321tweets: [{text: "RT 947FreshFM: A vigil will be held for #SandyHook victims at UMd. at 7pm at Nyumburu Ampitheater. BlackTerp",urls: [],id: 279718351289348100},{text: "…

15原型模式(Prototype)

依赖关系倒置&#xff1a; 动机(Motivate): 在软件系统中&#xff0c;经常面临着“某些结构复杂的对象”的创建工作;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化,但是它们却拥有比较稳定一致的接口。 如何应对这种变化&#xff1f;如何向“客户…

安装mlxtend_python机器学习包mlxtend的安装和配置详解

今天看到了mlxtend的包&#xff0c;看了下example集成得非常简洁。还有一个吸引我的地方是自带了一些data直接可以用&#xff0c;省去了自己造数据或者找数据的处理过程&#xff0c;所以决定安装体验一下。依赖环境首先&#xff0c;sudo pip install mlxtend 得到基础环境。然后…

14工厂方法模式(Factory Method)

耦合关系&#xff1a; 动机(Motivation): 在软件系统中&#xff0c;由于需求的变化&#xff0c;"这个对象的具体实现"经常面临着剧烈的变化&#xff0c;但它却有比较稳定的接口。 如何应对这种变化呢&#xff1f;提供一种封装机制来隔离出"这个易…

mysql 更新错误1062_mysql 出现1062错误怎么办

mysql 出现1062错误的解决办法&#xff1a;首先打开mysql的配置文件【my.cnf】&#xff1b;然后在client和mysqld下面加上相关代码&#xff1b;最后存关闭后重启mysql即可。mysql 出现1062错误的解决办法&#xff1a;两个instance的版本接近&#xff0c;猜测不是版本问题。执行…