html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS——只用CSS,不用Gif——制作“加载中…”动画效果。先看看效果:
上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能越来越强大,我们只用一小片段HTML和CSS就能实现,方便了很多,体积也减小了很多。
再加上一些CSS:
.pswp__preloader__icn {
opacity:0.75;
width: 24px;
height: 24px;
-webkit-animation: clockwise 500ms linear infinite;
animation: clockwise 500ms linear infinite;
}
/* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
.pswp__preloader__cut {
position: relative;
width: 12px;
height: 24px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.pswp__preloader__donut {
box-sizing: border-box;
width: 24px;
height: 24px;
border: 2px solid #000;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin:0;
-webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
}
@-webkit-keyframes clockwise {
0% { -webkit-transform: rotate(0deg) }
100% { -webkit-transform: rotate(360deg) }
}
@keyframes clockwise {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
@-webkit-keyframes donut-rotate {
0% { -webkit-transform: rotate(0) }
50% { -webkit-transform: rotate(-140deg) }
100% { -webkit-transform: rotate(0) }
}
@keyframes donut-rotate {
0% { transform: rotate(0) }
50% { transform: rotate(-140deg) }
100% { transform: rotate(0) }
}
html 载入中,用纯CSS实现加载中动画效果相关推荐
- css编写加载页面动画效果
一.html代码 <!-- Loader --><div id="loader-wrapper"><div id="loader" ...
- 转圈加载html,web前端入门到实战:纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式 发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南 不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
- 82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效 视频地址一:https://www.ixigua.c ...
- css实现加载中loading动画效果
1 效果 2 实现原理 原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
- 好看的css预加载旋转动画 与 流光字体
今天刚好在做这个功能,就实现一个 预加载的动画效果,随手记录 一.预加载旋转动画 Html <view class="concentric_round"></vi ...
- 纯CSS制作3D旋转风车动画效果
效果图展示 HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"&g ...
- html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
- PhP加载时显示动画,在ajax请求完之前的loading加载的动画效果实现
这篇文章给大家介绍的内容是关于在ajax请求完之前的loading加载的动画效果实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多时候我们需要引入框架来开发项目,这时我们可能会 ...
- [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
最新文章
- Postfix用户收发控制
- 68.视图在数据库系统三级结构的哪一级上?
- 【机器学习基础】相当全面的时间序列基础教程总结
- 基于MIG控制器的DDR3读写控制详解
- java线程实现排序_【多线程实现快速排序】
- Hibernate的多表查询,分装到一个新的实体类中的一个方法
- 教你如何完全解析Kotlin中的注解
- BZOJ 3083: 遥远的国度(树链剖分+DFS序)
- Halcon 基本算子释义
- 手势三连拍是什么软件_超全的摆拍姿势,摆姿困难用户一定要学!
- 系统无法安装High Definition Audio的UAA总线驱动程序之解决方法
- 好文汇总(不断更新)
- Opencvchina网站:把证件照蓝色背景转为白色
- 【报告分享】 2020年中国汽车用户消费洞察白皮-懂车帝巨量算数(附下载)
- 相机SD卡文件夹下所有文件损坏解决方法
- 2021自动化保研夏令营汇总
- c语言习题字符指针作函数参数
- 六级考研单词之路-六
- 基于Python深度图生成3D点云
- 视频:KUKA机器人秒杀画家 绘出人物肖像只需三步骤