html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效

这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构思新颖,效果非常的酷。

863573134cef69fdaf3e141737bc2986.png

安装

可以通过bower来按钮这个loading动画特效:

bower install loaders.css

使用方法

使用这个loading加载动画特效的时候,建议将效果中所需要的HTML元素包裹在一个容器中,并将包裹容器的显示设置为:display:flex,下面以“吃豆子”加载动画为例:

外围div.loader是包裹元素,它的显示要设置为:display:flex。

CSS动画

5个空的div中,第一个使用div:first-of-type选择器来选择并将其制作为吃豆人(pacman),余下的4个div分别使用nth-child选择器来选择并制作为“豆子”。最后使用CSS3 keyframes动画将“豆子”运动起来:

@-webkit-keyframes pacman-balls {

75% {

opacity: 0.7; }

100% {

-webkit-transform: translate(-100px, -6.25px);

transform: translate(-100px, -6.25px); } }

@keyframes pacman-balls {

75% {

opacity: 0.7; }

100% {

-webkit-transform: translate(-100px, -6.25px);

transform: translate(-100px, -6.25px); } }

.pacman {

position: relative; }

.pacman > div:nth-child(2) {

-webkit-animation: pacman-balls 1s 0s infinite linear;

animation: pacman-balls 1s 0s infinite linear; }

.pacman > div:nth-child(3) {

-webkit-animation: pacman-balls 1s 0.25s infinite linear;

animation: pacman-balls 1s 0.25s infinite linear; }

.pacman > div:nth-child(4) {

-webkit-animation: pacman-balls 1s 0.5s infinite linear;

animation: pacman-balls 1s 0.5s infinite linear; }

.pacman > div:nth-child(5) {

-webkit-animation: pacman-balls 1s 0.75s infinite linear;

animation: pacman-balls 1s 0.75s infinite linear; }

.pacman > div:first-of-type {

width: 0px;

height: 0px;

border-right: 25px solid transparent;

border-top: 25px solid #fff;

border-left: 25px solid #fff;

border-bottom: 25px solid #fff;

border-radius: 25px;

}

.pacman > div:nth-child(2), .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5) {

background-color: #fff;

width: 15px;

height: 15px;

border-radius: 100%;

margin: 2px;

width: 10px;

height: 10px;

position: absolute;

-webkit-transform: translate(0, -6.25px);

-ms-transform: translate(0, -6.25px);

transform: translate(0, -6.25px);

top: 25px;

left: 100px;

}

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

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

相关文章

中点和中值滤波的区别_频谱仪和EMI测试接收机什么区别?安泰维修中心分享

测试人员在选择使用射频仪器的时候都在纠结选择频谱仪还是测试接收机又或者信号分析仪。下面由安泰频谱分析仪维修中心分享频谱仪和EMI测试接收机什么区别?测量接收机是什么?频谱仪和信号分析仪什么区别?信号源分析仪是什么?一、频…

C++ 面试必问:深入理解虚函数表

点击蓝字关注我们深入理解C 虚函数表C中的虚函数的作用主要是实现了多态的机制。关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数。Derive d; Base1 *b1 &d; Base2 *b2 &d; Base3 *b3 &…

html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪

前言:我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz。作为一个完(wai)美(mao)主(xie)义(hui)者&#xff0c…

switch日文键盘打中文_12月有哪些Switch游戏值得期待?

文章转自A9vg,作者setsuka_duki 经历了11月的游戏浪潮后,一年中最后一个月份也悄然而至,相比较“战火连天”的11月,在12月发售的重量级游戏并不算太多,这边为大家整理12月哪些值得一玩的Switch游戏。 《Tools Up!》(分…

neo4j cypher_Neo4j:使用Cypher生成实时建议

neo4j cypherNeo4j的最常见用途之一是构建实时推荐引擎,一个共同的主题是它们利用大量不同的数据来提出有趣的推荐。 例如, 在此视频中, 阿曼达(Amanda)展示了约会网站如何通过社交联系开始,然后介绍热情&…

基于 C++11 的线程池 threadpool , 简洁且可以带任意多的参数

点击蓝字关注我们咳咳。C11 加入了线程库,从此告别了标准库不支持并发的历史。然而 c 对于多线程的支持还是比较低级,稍微高级一点的用法都需要自己去实现,譬如线程池、信号量等。线程池(thread pool)这个东西,在面试上多次被问到…

html jq移到出现内容,jquery操作html元素之( 获得内容和属性)

jQuery DOM 操作jQuery 中非常重要的部分,就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。提示:DOM Document Object Model(文档对象模型)DOM 定义访问 HTML 和 XML 文档的标准:…

c# 字典排序_Python零基础入门之列表与字典

本篇内容需结合源码,获取方法看末尾数据结构数据结构就是指从计算机存储、组织数据的结构列表(List) 元组(Tuple)字典(Dictionary)集合(Set)列表(List)列表中的数据按顺序排列列表有正序与倒序两种索引列表可存储任意类型数据,且允许重复创建列表变量名 …

jaxb xsd生成xml_使用JAXB和Jackson从XSD生成JSON模式

jaxb xsd生成xml在本文中,我演示了一种从XML Schema (XSD)生成JSON Schema的 方法 。 在概述从XML Schema创建JSON Schema的方法的同时,本文还演示了JAXB实现的使用(与JDK 9捆绑在一起的xjc版本2.2.12-b150331.1824 [b…

C语言中结构体struct的用法

点击蓝字关注我们定义结构体变量下面举一个例子来说明怎样定义结构体变量。struct string { char name[8]; int age; char sex[2]; char depart[20]; float wage1, wage2, wage3, wage4, wage5; }person;这个例子定义了一个结构名为string的结构体变量person。还可以省略变量名…

html全屏漂浮,jquery全屏漂浮广告插件,可点击关闭(原创)

jquery全屏漂浮广告插件 兼容主流浏览器 实现简单 调用简单 在线预览 源码下载jquery全屏漂浮广告插件 兼容主流浏览器 实现非常简单说明:jquery在1.9开始不支持.live()方法的写法而改用.on(),见http://jquery.com/upgrade-guide/1.9/#live-removed.该插…

华南理工计算机接口技术随堂练习_研究生考试计算机408跟845有什么区别?

楼上已经解释了什么是408,什么是845,那我当时考的就是计算机408,我就来补充一下408该怎么复习才能拿高分吧。首先介绍一下我自己,计算机本科生,然后头铁考了某个985的计算机专业,最后以403分的成绩成功上岸…

关于RabbitMQ集群分区的通知

如果您在集群中运行RabbitMQ,则集群不太可能会被分区 (集群的一部分失去与其余部分的连接)。 上面的链接页面介绍了显示状态和配置行为的基本命令。 当发生分区时,您首先希望得到通知,然后再解决它。 RabbitMQ实际上使…

C++ 面试考点(二)

点击蓝字关注我们11、extern 用法?extern 修饰变量的声明如果文件a.c 需要引用b.c 中变量int v,就可以在a.c 中声明extern int v,然后就可以引用变量v。extern 修饰函数的声明如果文件a.c 需要引用b.c 中的函数,比如在b.c 中原型是…

内存不能为read进不去桌面_四级报名进不去怎么办

英语四级报名进不去怎么办?这里提供有两种方法,一种是重复刷新,直到页面出现;另外一种就是错峰报名,叉开登录高峰期。很多考生在报名的时候遇到困难,最多的就是报名页面进不去,这个时候有一些考生就会产生疑惑&#x…

bean创建异常_快速提示:消息驱动Bean中的异常处理

bean创建异常让我们快速回顾一下关于消息驱动Bean的特殊处理。 MDB的入口点是重写的onMessage方法。 它不提供引发检查异常的作用域,因此,如果要处理错误情形,则需要从代码中传播未检查异常(java.lang.RuntimeException的子类&am…

C语言线程库的使用,这篇值得收藏!

点击蓝字关注我们1. 线程概述线程是轻量级的进程(LWP:light weight process),在 Linux 环境下线程的本质仍是进程。在计算机上运行的程序是一组指令及指令参数的组合,指令按照既定的逻辑控制计算机运行。操作系统会以进…

alexeyab darknet 编译_【目标检测实战】Darknet—yolov3模型训练(VOC数据集)

原文发表在:语雀文档0.前言本文为Darknet框架下,利用官方VOC数据集的yolov3模型训练,训练环境为:Ubuntu18.04下的GPU训练,cuda版本10.0;cudnn版本7.6.5。经过一晚上的训练,模型20个类别的mAP达到…

html字符串转svg,【SVG】如何操作SVG Text

上周我们学习了如何使用元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本,也尝试了给SVG文本中的每个字符定位。关于元素还有很多内容。在处理SVG文本时,不要局限于x和y属性。元素还有几个可以添加的属性,现在我们开始讨论吧。dx和dy属…

aws sqs_在Spring使用AWS SQS创建消息驱动Bean

aws sqs在我之前的文章中,我展示了一个简单的示例,该示例如何将AWS SQS与Spring Framework结合使用以将消息放入队列并从队列中读取消息。 在本文中,我将更进一步,并使用Spring创建一个“消息驱动的Bean”,以便对放入队…