摘要:核心代码传送门核心代码传送门核心代码传送门核心代码传送门参考实现种效果未完待续
One
核心代码:
.loading{ width: 70px; height: 200px; margin: auto; display: flex; } .loading span{ display: inline-block; width: 8px; height: 40px; border-radius: 4px; background: #91d5ff; margin: auto; -webkit-animation: load 1s ease infinite; } @-webkit-keyframes load{ 0%,100%{ height: 40px; background: #91d5ff; } 50%{ height: 80px; background: #40a9ff; } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; }
jsfiddle传送门
Two核心代码:
.container{ width:100%; height:100%; display:flex; } .loading{ width:160px; height:8px; background:#91d5ff; border-radius:4px; margin:auto; display: flex; align-items:center; -webkit-animation: load 1.2s ease-in-out infinite alternate; } .loading span{ display:inline-block; width:18px; height:18px; background:#91d5ff; border-radius:9px; -webkit-animation: loadSpan 1.2s ease-in-out infinite alternate; } @-webkit-keyframes load{ 0%{ background:#91d5ff; } 100%{ background:#69c0ff; } } @-webkit-keyframes loadSpan{ 0%{ background:#91d5ff; } 100%{ margin-left:142px; background:#69c0ff; } }
jsfiddle传送门
Three核心代码:
.container{ width:100%; height:100%; display:flex; } .loading{ width:160px; height:80px; margin:auto; display: flex; } .loading span{ display:inline-block; width:18px; height:18px; background:#91d5ff; border-radius:9px; margin:auto; -webkit-animation: loadSpan 1s ease infinite; } @-webkit-keyframes loadSpan{ 0%{ opacity:1; } 100%{ opacity:0; } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; }
jsfiddle传送门
Four核心代码:
.container{ width:100%; height:100%; display:flex; } .loading{ width:160px; height:80px; margin:auto; display: flex; } .loading span{ display:inline-block; width:18px; height:18px; background:#91d5ff; border-radius:9px; margin:auto; -webkit-animation: loadSpan 1.2s ease infinite; } @-webkit-keyframes loadSpan{ 0%{ opacity:1; } 100%{ opacity:0; -webkit-transform: scale(0.3); } } .loading span:nth-child(2){ -webkit-animation-delay:0.2s; } .loading span:nth-child(3){ -webkit-animation-delay:0.4s; } .loading span:nth-child(4){ -webkit-animation-delay:0.6s; } .loading span:nth-child(5){ -webkit-animation-delay:0.8s; }
jsfiddle传送门
ps:参考CSS3实现18种Loading效果
未完待续
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112857.html
摘要:核心代码传送门核心代码传送门核心代码传送门核心代码传送门参考实现种效果未完待续 One showImg(https://segmentfault.com/img/bV0fDv?w=294&h=242); 核心代码: .loading{ width: 70px; height: 200px; margin: auto; ...
摘要:加载动效按钮代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 加载动效按钮 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级...
摘要:加载动效按钮代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 加载动效按钮 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级...
摘要:加载动效按钮代码储存在效果预览初衷很多人在初学前端的时候都会问,如何入门前端同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的入门级的教材并不太满意。在这里本人整理了目前页面上常见功能实现的具体实例。 加载动效按钮 代码储存在Github效果预览 初衷:很多人在初学前端的时候都会问,如何入门前端?同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 入门级...
摘要:现在开始创建一个包并分发给其他人使用,并确保遵循你迄今为止学到的标准和最佳实践。第步实践对于练习,继续编写单元测试,以完成目前为止所做的实际任务,特别是你在步骤中所做的练习。 今天的Web开发与几年前完全不同,有很多不同的东西可以很容易地阻止任何人进入Web开发。这是我们决定制作这些循序渐进的视觉指南的原因之一,这些指南展示了更大的图景,并让任何人清楚了解他们在网页开发中扮演的角色。 ...
阅读 1177·2023-04-26 02:20
阅读 3279·2021-11-22 14:45
阅读 4071·2021-11-17 09:33
阅读 946·2021-09-06 15:00
阅读 1447·2021-09-03 10:30
阅读 3802·2021-07-26 22:01
阅读 959·2019-08-30 15:54
阅读 488·2019-08-30 15:43