当前位置: 首页 > article >正文

css之loading旋转加载

1.效果
在这里插入图片描述
2.代码

	<!-- 检测动画 -->
					<view class="sk-chase">
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
						<view class="sk-chase-dot"></view>
					</view>





<style>
	// 检测等待动画
	.sk-chase {
		width: 40px;
		height: 40px;
		position: relative;
		animation: sk-chase 2.5s infinite linear both;
	}

	.sk-chase-dot {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		animation: sk-chase-dot 2.0s infinite ease-in-out both;
	}

	.sk-chase-dot:before {
		content: '';
		display: block;
		width: 25%;
		height: 25%;
		background-color: #1677FF;
		border-radius: 100%;
		animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
	}

	.sk-chase-dot:nth-child(1) {
		animation-delay: -1.1s;
	}

	.sk-chase-dot:nth-child(2) {
		animation-delay: -1.0s;
	}

	.sk-chase-dot:nth-child(3) {
		animation-delay: -0.9s;
	}

	.sk-chase-dot:nth-child(4) {
		animation-delay: -0.8s;
	}

	.sk-chase-dot:nth-child(5) {
		animation-delay: -0.7s;
	}

	.sk-chase-dot:nth-child(6) {
		animation-delay: -0.6s;
	}

	.sk-chase-dot:nth-child(1):before {
		animation-delay: -1.1s;
	}

	.sk-chase-dot:nth-child(2):before {
		animation-delay: -1.0s;
	}

	.sk-chase-dot:nth-child(3):before {
		animation-delay: -0.9s;
	}

	.sk-chase-dot:nth-child(4):before {
		animation-delay: -0.8s;
	}

	.sk-chase-dot:nth-child(5):before {
		animation-delay: -0.7s;
	}

	.sk-chase-dot:nth-child(6):before {
		animation-delay: -0.6s;
	}

	@keyframes sk-chase {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes sk-chase-dot {

		80%,
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes sk-chase-dot-before {
		50% {
			transform: scale(0.4);
		}

		100%,
		0% {
			transform: scale(1.0);
		}
	}
</style>

http://www.kler.cn/a/371963.html

相关文章:

  • Spring的高效开发思维(二)
  • LeetCode算法(链表)
  • [0152].第3节:IDEA中工程与模块
  • ip地址分为几大类-IP和子网掩码对照表
  • python代码中通过pymobiledevice3访问iOS沙盒目录获取app日志
  • C++ 整型大数运算(大整数运算)项目
  • 大数据新视界 -- 大数据大厂之大数据和增强现实(AR)结合:创造沉浸式数据体验
  • NVR设备ONVIF接入平台EasyCVR视频融合平台智慧小区视频监控系统建设方案
  • java的Annotation使用
  • MYSQL全局锁、标级锁、行级锁
  • 房屋租赁系统
  • Linux 如何精准排除特定文件并批量替换字符串
  • rabbitmq自学总结
  • net start mysql 启动mysql服务,发生系统错误,拒绝访问
  • 浅谈站点可靠性工程之SRE
  • 【10天速通Navigation2】(三) :Cartographer建图算法配置:从仿真到实车,从原理到实现
  • 研二了,该想想做啥呢?
  • 【算法系列-二叉树】层序遍历
  • 【2024|滑坡数据集论文解读1】CAS滑坡数据集:用于深度学习滑坡检测的大规模多传感器数据集
  • Scala 特质(Traits)与类继承 #scala #Scala #Scala继承
  • Mac程序坞窗口预览的方法来了
  • lego-loam featureAssociation 源码注释(七)
  • 使用 Kafka 和 MinIO 实现人工智能数据工作流
  • Windows 上更新OpenSSL 到 1.1.1
  • 现代化可观测性平台(1)
  • C语言常用的数据类型有哪些?