CSS布局案例 1-51 loading等待效果

一醉南柯

已于 2024-01-04 16:59:55 修改

阅读量467

点赞数

分类专栏： Web前端开发文章标签： css 前端

于 2021-04-24 19:44:18 首次发布

本文链接：https://blog.csdn.net/dpl12/article/details/116101580

版权

Web前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

前言
实现过程

前言

使用css3实现loading等待效果。

实现过程

1.步骤

loading效果实现步骤:
	  1、先制作两组正方区域的四个小圆(边框圆角化)，分别放在区域的四个角(绝对定位实现)
	  2、两组小圆重合(绝对定位实现)
	  3、一组小圆旋转45度，8个小圆形成一个大圆
	  4、小圆和整组都动起来(动画延迟和图形缩放实现)

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3动画实现loading效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.circlebox{
				width: 50px;
				height: 50px;
				/* 将两组区域组合为一个 */
				position: absolute;
				left: 50%;
				top: 50%;
			}
			.circlebox p{
				width: 15px;
				height: 15px;
				background-color: #7195B7;
				position: absolute;   /* 绝对定位后,p标签就脱离了文档流,可设置宽高 */
				border-radius: 50%;   /* 边框圆角化 */
				animation: move 1.5s infinite linear;  /*图形缩放效果*/
			}
			.circlebox p:nth-of-type(1){
				left: 0;
				top: 0;
			}
			.circlebox p:nth-of-type(2){
				right: 0;
				top: 0;
			}
			.circlebox p:nth-of-type(3){
				right: 0;
				bottom: 0;
			}
			.circlebox p:nth-of-type(4){
				left: 0;
				bottom: 0;
			}
			.circlebox:nth-child(2){
				/* 第二组元素旋转45度,两组小圆形成大圆 */
				transform: rotate(45deg);
			}
			/* 缩放动画 */
			@keyframes move{
				0%{
					transform: scale(0);
				}
				50%{
					transform: scale(1);
				}
				100%{
					transform: scale(0);
				}
			}
			.circlebox:nth-of-type(1) p:nth-of-type(1){
				/* 延迟动画,负值越小,就越早播放 */
				animation-delay: -0.1s;
			}
			.circlebox:nth-of-type(2) p:nth-of-type(1){
				animation-delay: -0.3s;
			}
			.circlebox:nth-of-type(1) p:nth-of-type(2){
				animation-delay: -0.5s;
			}
			.circlebox:nth-of-type(2) p:nth-of-type(2){
				animation-delay: -0.7s;
			}
			.circlebox:nth-of-type(1) p:nth-of-type(3){
				animation-delay: -0.9s;
			}
			.circlebox:nth-of-type(2) p:nth-of-type(3){
				animation-delay: -1.1s;
			}
			.circlebox:nth-of-type(1) p:nth-of-type(4){
				animation-delay: -1.2s;
			}
			.circlebox:nth-of-type(2) p:nth-of-type(4){
				animation-delay: -1.4s;
			}
		</style>
	</head>
	
	<body>
		<div class="circlebox">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
		<div class="circlebox">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</body>
</html>

3.效果

在这里插入图片描述

一醉南柯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局案例 1-51 loading等待效果

文章目录前言实现过程1.步骤2.代码3.效果前言使用css3实现loading等待效果。实现过程1.步骤loading效果实现步骤: 1、先制作两组正方区域的四个小圆(边框圆角化)，分别放在区域的四个角(绝对定位实现) 2、两组小圆重合(绝对定位实现) 3、一组小圆旋转45度，8个小圆形成一个大圆 4、小圆和整组都动起来(动画延迟和图形缩放实现) 2.代码<!DOCTYPE html><html> <head> <
复制链接

扫一扫