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!》(分…

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

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

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.该插…

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…

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属…

C++ 面试考点(三)

点击蓝字关注我们21、构造函数和析构函数可以调用虚函数吗,为什么在C中,提倡不在构造函数和析构函数中调用虚函数;在构造函数和析构函数调用的所有函数(包括虚函数)都是编译时确定的, 虚函数将运行该类中的版本.因为父类对象会在子类之前进行…

用终端访问路由器设置端口开发_serial for mac(终端管理软件)v2.0.3

原标题:serial for mac(终端管理软件)v2.0.3serial for mac是应用在Mac上的一款终端管理软件,可以帮助您连接和控制串行设备,如服务器,路由器或调制解调器等网络设备,PBX系统等。好消息是Serial为大多数串行设备提供了…

大神级的C++性能优化,你能看懂吗?

点击蓝字关注我们一、前言性能优化不管是从方法论还是从实践上都有很多东西,文章会从C语言本身入手,介绍一些性能优化的方法,希望能做到简洁实用。二、实例1在开始本文的内容之前,让我们看段小程序:// 获取一个整数对应…

钢笔墨水能否代替打印机墨水_LAMY钢笔应该如何选择墨水?

其实墨水世面上基本是有两种:碳素墨水和非碳素。碳素墨水相对比较堵笔,碳素墨水对钢笔本身腐蚀性不大,腐蚀性大的那是染料/颜料墨水。碳素墨水写字非常容易有笔锋,而非碳素墨水就显得略微柔和了。有人说,字写得好的人用…

html ctf查找,Web CTF 解题思路总结—南京邮电大学攻防平台writeup

1、直接查看源代码例:签到题(50)2、PHP的特性(1)MD5 碰撞例:md5 collision(50)md5碰撞:MD5摘要算法可以从多个字节组成的串中计算出由32个字节构成的“特征串”,对于超过32字节的串来说,MD5计算得出的值必然是其一个子…

java 1.8新增功能_睡觉时:新增的Java 8新增功能

java 1.8新增功能自Java 8推出以来,最有趣的功能是什么? Java 8最近庆祝了它的第一个生日,其主要版本已经在一年多以前了。 这当然值得庆祝。 自从最初的Java 8版本问世以来,已经发布了六个更新。 这些更新中的某些元素是次要的…