当前位置:首页 > 电脑知识 > 正文内容

这都可以(css实现loading动画)loading效果,纯css实现Loading加载效果,纯css实现Loading加载效果,

sauo3年前 (2022-09-17)电脑知识99

写几个利用纯CSS实现loading加载效果的示例,代码非常的简单,有需要的可以参考一下。

CSS实现Loading加载的效果

例1:loading 直线加载

实例代码:

Markup
<style> .load{ width:120px; height:20px; background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:loading 2s infinite linear; margin-bottom: 20px; } @keyframes loading { 100% {background-size:100%} } </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

例2:loading 平滑加载

实例代码:

Markup
<style> .load{ width:120px; height:20px; border-radius: 20px; background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue; animation:load 2s infinite steps(10); margin-bottom: 20px; } @keyframes load {100% {background-size:110%}} </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

例3:loading 方块加载

实例代码:

Markup
<style> .load{ width:120px; height:20px; -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%; background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:load 2s infinite steps(6); margin-bottom: 20px; } @keyframes load { 100% {background-size:120%} } </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

例4:loading 电池充电效果

实例代码:

Markup
<style> .load { width:80px; height:40px; border:2px solid #000; padding:3px; background: repeating-linear-gradient(90deg,#000 0 10px,#000 0 16px) 0/0% no-repeat content-box content-box; position: relative; animation:load 2s infinite steps(6); margin-bottom: 20px; } .load::before { content:""; position: absolute; top: 50%; left:100%; transform: translateY(-50%); width:10px; height: 10px; border: 2px solid #000; } @keyframes load { 100% {background-size:120%} } </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

本文链接:http://blog.sauo.top/?id=324 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=324

分享给朋友:

“这都可以(css实现loading动画)loading效果,纯css实现Loading加载效果,纯css实现Loading加载效果,” 的相关文章

深度揭秘(Ubuntu 防火墙设置)ubuntu防火墙配置文件,ubuntu防火墙的安装与设置,ubuntu防火墙的安装与设置,

免费领取腾讯云服务器! ubuntu系统中的防火墙使用的是iptables,而为了方便防火墙的设置ubuntu提供了一个防火墙管理工具ufw.下面这篇文章就说一说关于防火墙管理工具ufw的安装与使用方法。 ubuntu防火墙ufw的安装与设...

新鲜出炉(ubuntu系统与centos系统区别)ubuntu还是centos,centos系统与ubuntu系统的区分,centos系统与ubuntu系统的区分,

免费领取腾讯云服务器! Linux的发行版有很多,而我们经常使用的为centos与ubuntu,下面这篇博文就说说这两个系统的发源与区别。 CentOS CentOS(Community Enterprise Operati...

这都可以(php保存网络图片到本地)php下载图片到本地,php保存图片到本地的方法,php保存图片到本地的方法,

免费领取腾讯云服务器! 下面列几种网上收集的利用php脚本将远程图片保存至本地的方法,各位自行测试代码是否可用,另外php保存远程图片到本地并不能确保百分百的一定会拉取到远程图片的数据。 php保存远程图片到本地的方法 方法...

这都可以?(常用正则表达式大全)常用正则表达式大全图片,常用正则表达式大全,常用正则表达式大全,

免费领取腾讯云服务器! 网上收集了一些常用的正则表达式,基本上都全,需要的可以拿去了。 关于号码的正则表达式 QQ号正则表达式 BASIC /^[1-9][0-9]{...

没想到(imagettftext函数)imagettftext函数支持的编码类型,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,imagettftext(): any2eucjp(): invalid code in input string 错误解决方法,

免费领取腾讯云服务器! 最近在研究关于php生成图片的东西,发现了 imagettftext() 函数中一个不是错误的错误,具体的错误情况如下所示。 错误代码:...

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

免费领取腾讯云服务器! 上两篇博文,分别写了在window系统下获取文件md5值的方法与mac苹果系统下获取文件md5值的方法,今天这篇博文就写一下在linux系统下获取文件md5值的方法。 Linux系统下获取文件md5值的方法...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。