html box 竖线,CSS3 小竖条脉冲型LOADING动效

CSS

语言：

CSSSCSS

确定

.loader-wrap {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

background-color: #ff9328;

}

.loader {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

height: 40px;

width: 80px;

box-sizing: border-box;

}

.loader .loader-item {

position: relative;

float: left;

height: 40px;

width: 4px;

margin: 0 2px;

background-color: #ffffff;

}

.loader .loader-item:nth-child(1) {

-webkit-animation: loader-item-1 2s linear infinite;

animation: loader-item-1 2s linear infinite;

}

.loader .loader-item:nth-child(2) {

-webkit-animation: loader-item-2 2s linear infinite;

animation: loader-item-2 2s linear infinite;

}

.loader .loader-item:nth-child(3) {

-webkit-animation: loader-item-3 2s linear infinite;

animation: loader-item-3 2s linear infinite;

}

.loader .loader-item:nth-child(4) {

-webkit-animation: loader-item-4 2s linear infinite;

animation: loader-item-4 2s linear infinite;

}

.loader .loader-item:nth-child(5) {

-webkit-animation: loader-item-5 2s linear infinite;

animation: loader-item-5 2s linear infinite;

}

.loader .loader-item:nth-child(6) {

-webkit-animation: loader-item-6 2s linear infinite;

animation: loader-item-6 2s linear infinite;

}

.loader .loader-item:nth-child(7) {

-webkit-animation: loader-item-7 2s linear infinite;

animation: loader-item-7 2s linear infinite;

}

.loader .loader-item:nth-child(8) {

-webkit-animation: loader-item-8 2s linear infinite;

animation: loader-item-8 2s linear infinite;

}

.loader .loader-item:nth-child(9) {

-webkit-animation: loader-item-9 2s linear infinite;

animation: loader-item-9 2s linear infinite;

}

.loader .loader-item:nth-child(10) {

-webkit-animation: loader-item-10 2s linear infinite;

animation: loader-item-10 2s linear infinite;

}

.loader:after {

content: 'Loading...';

font-size: 16px;

font-family: "Arial";

color: #ffffff;

text-align: center;

position: absolute;

left: 0;

right: 0;

bottom: -32px;

margin: auto;

}

@-webkit-keyframes loader-item-1 {

1% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

11% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

21% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-1 {

1% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

11% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

21% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-2 {

7% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

17% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

27% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-2 {

7% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

17% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

27% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-3 {

13% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

23% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

33% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-3 {

13% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

23% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

33% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-4 {

19% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

29% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

39% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-4 {

19% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

29% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

39% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-5 {

25% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

35% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

45% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-5 {

25% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

35% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

45% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-6 {

31% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

41% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

51% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-6 {

31% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

41% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

51% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-7 {

37% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

47% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

57% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-7 {

37% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

47% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

57% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-8 {

43% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

53% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

63% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-8 {

43% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

53% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

63% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-9 {

49% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

59% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

69% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-9 {

49% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

59% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

69% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-webkit-keyframes loader-item-10 {

55% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

65% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

75% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes loader-item-10 {

55% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

65% {

-webkit-transform: scaleY(1.4);

transform: scaleY(1.4);

}

75% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

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

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

相关文章

面趣 | 为什么要分稳定排序和非稳定排序？

面趣 | 为什么要分稳定排序和非稳定排序？

作者channingbreeze如需转载，请联系原作者。小史是一个应届生，虽然学的是电子专业，但是自己业余时间看了很多互联网与编程方面的书，一心想进BAT互联网公司。今天他去了一家互联网小巨头公司面试了。没想到面试并不像想象中的顺利。…
阅读更多...
个人求职简历计算机应用技术学院信息门户,计算机应用技术专业求职简历范文...

个人求职简历计算机应用技术学院信息门户,计算机应用技术专业求职简历范文...

计算机应用技术专业求职简历范文应届毕业生求职网为毕业生推荐的是计算机方面的简历范文，欢迎阅读浏览：姓名：yjbys 性别：出生年月： 民族：户口所在地： 现居住地：婚姻状况：…
阅读更多...
云漫圈 | AR VR傻傻分不清楚。。。

云漫圈 | AR VR傻傻分不清楚。。。

原文出自【烹茶十一】对此，你是不是也有好多吐槽的，来聊聊呀~~推荐阅读这届程序员，要做好苦日子的准备了？我跟OpenStack 1-8年，从ABC到HI、到KO完01微 信 群 添加小编微信：tangguoyemeng，备注“…
阅读更多...
Python 异常处理-Python零基础入门教程

Python 异常处理-Python零基础入门教程

目录 一.Python 异常处理简介二.Python 异常捕获方式 1.捕获所有异常2.捕获指定异常3.捕获多个异常4.万能的异常捕获5.异常中的 else6.异常中的 finally7.raise 主动触发异常 三.猜你喜欢 零基础 Python 学习路线推荐 : Python 学习目录 >> Python 基础入门 在 Python 开…
阅读更多...
CTF基本赛制与题型

CTF基本赛制与题型

CTF简介 CTF的全称为Capture The Flag,即夺旗赛。CTF竞赛活动蓬勃发展，已成为了锻炼信息安全技术，展现安全能力和水平的绝佳平台。 CTF号称计算机界的奥林匹克。 CTF目标： CTF参赛队伍的目标为获取尽可能多的flag。参赛队伍需要通过解决信息…
阅读更多...
正确使用计算机网络,如何正确使用计算机网络

正确使用计算机网络,如何正确使用计算机网络

计算机网络的使用，说简单一点，进行网络世界，大家都会使的，那么可能性的存在哪些问题呢?下面是小编跟大家分享的是，欢迎大家来阅读学习~工具/原料计算机网络方法/步骤计算机网络有几大特点，第一自然也是内容…
阅读更多...
解析微服务架构组件，看这一篇文章就够

解析微服务架构组件，看这一篇文章就够

1. 如何发布和引用服务服务描述：服务调用首先解决的问题就是服务如何对外描述。 常用的服务描述方式包括 RESTful API、XML 配置以及 IDL 文件三种。RESTful API主要被用作 HTTP 或者 HTTPS 协议的接口定义，即使在非微服务架构体系下，也被广泛…
阅读更多...
Python __name__ == ‘__main__’详细解释-Python零基础入门教程

Python __name__ == ‘__main__’详细解释-Python零基础入门教程

目录 一.简介 1.__name__2.’__main__’3.__name__ ‘__main__‘ 二.作用三.猜你喜欢 ​ 零基础 Python 学习路线推荐 : Python 学习目录 >> Python 基础入门 学习过 C 语言或者 Java 语言的盆友应该都知道程序运行必然有主程序入口 main 函数，而 Python 却…
阅读更多...
CTF备战

CTF备战

CTF-WEB条件： 之间件的基础：Apache、IIS、Nginx、WebLogic、Tomcat等 数据库的基础：Oracle、MySql、SqlServer等 编程语言基础：PHP、Python、PythonWeb、Java、JavaWeb等 安全漏洞基础：XSS、CSRF、SSRF、SQL注入、文件…
阅读更多...
学计算机高中选那三科,女生高中选哪三科最吃香

学计算机高中选那三科,女生高中选哪三科最吃香

女生高中选哪三科最吃香2020-12-30 14:42:19文/丁雪竹女生高中选哪三科最吃香，怎么选择好，小编整理了相关信息，来看一下！女生高中选哪三科最吃香兴趣能够决定学习的深度，女生只要根据自己的兴趣，在最佳组合…
阅读更多...
CTF-杂项题-伪加密

CTF-杂项题-伪加密

手动分离压缩包注意： zip压缩包文件头格式为504B0304，之间包含504B0102，文件以504B0506****结尾，注意这类格式。 zip伪加密 zip伪加密是在文件头的加密标志位做修改，进而再打开文件时识被别为加密压缩包。但实际是没有…
阅读更多...
Anaconda是什么？Anconda下载安装教程 - Python零基础入门教程

Anaconda是什么？Anconda下载安装教程 - Python零基础入门教程

目录 一.前言二.Anaconda 是什么？三.Anaconda 下载地址四.Anaconda 安装五.猜你喜欢 零基础 Python 学习路线推荐 : Python 学习目录 >> Python 基础入门 一.前言 Anaconda 工具集合 – 第三方库集合Pycharm 开发工具，俗称 IDE – 写代码工具 二…
阅读更多...
Cloud一分钟 | 电商月将至，腾讯云DCDB助力电商企业应对支付洪峰

Cloud一分钟 | 电商月将至，腾讯云DCDB助力电商企业应对支付洪峰

Hello，everyone：10月08早，星期五，祝大家工作愉快！一分钟新闻时间：推荐阅读1.7亿条数据，比胡同和撸串更真实的北京面趣 | 为什么要分稳定排序和非稳定排序？使用动态规划解决童年难题V…
阅读更多...
html5 自定义标签图例,奥维互动地图浏览器电脑版中自定义标签图标的增加方法...

html5 自定义标签图例,奥维互动地图浏览器电脑版中自定义标签图标的增加方法...

这篇文章讲的是奥维互动地图浏览器电脑版中自定义标签图标的增加方法，感兴趣的小伙伴可以来学习一下哦。奥维互动地图浏览器电脑版中自定义标签图标的增加方法1、点击菜单：系统---数据管理---自定义图标管理(也可以就在标签图片选择--自定义页面&#xf…
阅读更多...
CTF-MISC杂项题1

CTF-MISC杂项题1

由于内容过多，分两篇展示 杂项题基本解题攻略： 内容： 1.文件操作与隐写 2.图片隐写术 3.压缩文件处理 4.流量取证技术 文件操作与隐写 file命令可识别文件类型 file filejpg file filegpng file filegzip 文件类型识别 在Window&#xff…
阅读更多...
一座在云端的工厂是什么样的？

一座在云端的工厂是什么样的？

相信人们在生活中体验了很多云应用带来的便捷，而在工业领域，一座在云端的工厂会是什么样的呢？MindSphere on Alibaba Cloud就要来了，很快中国的小伙伴们就可以真切感受到了。就在9月19日，西门子和阿里云就MindSphere落…
阅读更多...
Pycharm 提示：this license * has been cancelled - Python零基础入门教程

Pycharm 提示：this license * has been cancelled - Python零基础入门教程

目录 一.前言一.找到 hosts 文件二.修改 hosts 文件三.检查 hosts 文件是否修改成功四.pycharm 安装详细教程五.猜你喜欢 一.前言 零基础 Python 学习路线推荐 : Python 学习目录 >> Python 基础入门 Pycharm 安装过程中，提示 this license **** has been c…
阅读更多...
湘潭哪里学计算机编程,湘潭哪里学机器人编程？湘潭学机器人编程的学校有哪些？...

湘潭哪里学计算机编程,湘潭哪里学机器人编程？湘潭学机器人编程的学校有哪些？...

原标题：湘潭哪里学机器人编程？湘潭学机器人编程的学校有哪些？随着机器人编程教育在一线城市的大众化，许多家长也纷纷跟随着趋势送孩子去学习，如果你也想要自己的孩子学习机器人编程，那就一起来看看学习机器…
阅读更多...
Cloud一分钟 | 蚂蚁金服估值超万亿；Google大举进军游戏市场

Cloud一分钟 | 蚂蚁金服估值超万亿；Google大举进军游戏市场

Hello，everyone：10月09日早，星期二，祝大家工作愉快！一分钟新闻时间：完1.微信群：添加小编微信：tangguoyemeng，备注“进群姓名公司职位”即可，加入【云计算学习…
阅读更多...
CTF-MISC杂项题2

CTF-MISC杂项题2

这篇博客接着CTF-MISC杂项题1继续讲 03 压缩文件处理 压缩文件分析 伪加密一般考察zip与rar，现在不常考，因为现在压缩软件功能强大，自动可以识别伪加密 框里的80的尾数为0即可解密，若改了值还报错，为真加密 …
阅读更多...
最新文章

Copyright @ 2022~2023