css loading 圆圈,CSS 各种loading 实现
CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,对自己做个总结吧……
1:loading 简单实现(圆形闪烁)
.load{
width: 40px;
height: 40px;
border-radius: 50px;
background: red;
animation: fadeOut 1.0s infinite ease-in-out;
-webkit-animation: fadeOut 1.0s infinite ease-in-out;
}
@keyframes fadeOut {
from{transform: scale(0.0)}
to{transform: scale(1.0);opacity: 0}
}
@-webkit-keyframes fadeOut{
from{transform: scale(0.0)}
to{transform: scale(1.0);opacity: 0}
}
2:线条波动效果
代码实现:(主要依赖 : animation-delay)
.box .lineload >div{
width: 3px;
height: 50px;
background: green;
animation: strechdeley 1.2s infinite ease-in-out;
-webkit-animation: strechdeley 1.2s infinite ease-in-out;;
margin-left: 3px;
}
.box .lineload .line1{
animation-delay: -1.1s;
}
.box .lineload .line2{
animation-delay: -1s;
}
.box .lineload .line3{
animation-delay: -0.9s;
}
.box .lineload .line4{
animation-delay: -0.8s;
}
.box .lineload .line5{
animation-delay: -0.7s;
}
@keyframes strechdeley{
0%,40%,100%{
transform: scale(0.4);
}
20%{
transform: scale(1.0);
}
}
@-webkit-keyframes strechdeley{
0%,40%,100%{
-webkit-transform: scale(0.4);
}
20%{
-webkit-transform: scale(1.0);
}
html
3:圆环loading 旋转动画
@keyframes am-ringload {
from { transform: rotate(0deg)}
to{ transform: rotate(360deg)}
}
@-webkit-keyframes am-ringload {
from { -webkit-transform: rotate(0deg)}
to{ -webkit-transform: rotate(360deg)}
}
.box .ringload {
width: 60px;
height: 60px;
background: black;
border: 5px solid #666666;
border-left-color:#ffffff ;
margin-left: 50px;
border-radius: 50%;
animation: am-ringload 1s infinite ease;
-webkit-animation: am-ringload 1s infinite ease;
}
4:使用1,2原理可实现省略号效果的loading ,自身尝试吧!
css loading 圆圈,CSS 各种loading 实现相关推荐
- div旋转 vue_详细解析:uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言 上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
- vue中loading chunk-xxx.css failed和net::ERR_ABORTED 404 解决方法
文章目录 前言 1. 问题现象 2. 解决方法 3. 总结问题出现原因 前言 本文只是记录了自己经历项目出现的Loading chunk-xxx.css failed问题出现的原因和解决方法,该问题出 ...
- 详细解析:uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言 前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
- css实现加载中loading动画效果
1 效果 2 实现原理 原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- 【css画圆圈用线连接】
CSS画圆圈用线连接 画圆圈中间有数字1.2.3.之间用线连接 1画圆 .circle1_circle{/*border-radius: 50%; */display: inline-block;wi ...
- css位置布局,CSS定位布局相关
本文档包括CSS的 样式 定位 框模型 如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
- css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字 什么??这怎么可能是文字,文字怎么 ...
- vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
最新文章
- 设计时数据源:在PostgreSql 数据查询中使用参数过滤
- 工具 - 资源共享 公布一个我的网盘.
- 腾讯云DevOps技术揭秘:新时代运维重器Tencent Hub最佳实践
- c语言中标识符和关键字,C语言(三) C 标识符和关键字
- jQuery (二)
- python根据行名称生成二维数组
- 代码运行错误及解决方法
- 2019 outlook 数据迁移_清华开源迁移学习算法库
- 米莱迪机器人加物理攻击_自拍、航拍、运动拍“ALL IN ONE”,臻迪PowerEgg X开启全新未来...
- python 词表里的词不符合_【NLP】词表太大怎么办—Adaptive softmax模型和代码解析...
- I2c-tools工具使用及调试
- 基础篇:6.5)形位公差-标注 Mark
- 栈帧ebp,esp详解
- 最强悍的围棋人机对战程序 MoGo !
- cnpm的安装(超级详细版)
- 查询物流信息,出现特殊符号如何一键替换
- es6的reduce用于求数组总和
- 管理罗盘-管理者角色认知与定位
- OpenStack网络 - 使用vlan模式来剖析openstack网络相关概念及原理
- kindle取消注册与注册教程