利用@keyframes规则设计loading加载样式

最新推荐文章于 2024-08-26 16:53:52 发布

Junli_1413

最新推荐文章于 2024-08-26 16:53:52 发布

阅读量1.2k

点赞数

分类专栏： css 文章标签： loading

本文链接：https://blog.csdn.net/qq_20901397/article/details/80920140

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在学习github上一个开源项目，以前做的项目小，从没考虑过loading样式问题，下面记录一下，利用@keyframes进行div元素的移动。实现loading的样式

自己把项目中的代码组合了出来，记录一下：

<html>
<head>
<title>Loading加载样式</title>
<style>
	body {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	div.logo {
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    position: relative;
	}

	div.logo::before,
	div.logo::after {
		z-index: 1;
		box-sizing: border-box;
		content: '';
		position: absolute;
		border: 4px solid transparent;
		width: 0;
		height: 0;
		animation-direction: alternate;
		animation-timing-function: linear;
	}

	div.logo::before {
		top: 0;
		left: 0;
		animation: border-before 1.5s infinite;
		animation-direction: alternate;
	}

	div.logo::after {
		bottom: 0;
		right: 0;
		animation: border-after 1.5s infinite;
		animation-direction: alternate;
	}

	div.logo>div {
		position: absolute;
		opacity: 0;
	}

	div.logo div.white {
		border-left: 4px solid black;
		top: 0;
		bottom: 0;
		right: 0;
		width: 0;
		animation: white 1.5s infinite;
		animation-direction: alternate;
	}

	div.logo div.orange {
		border-top: 4px solid black;
		left: 0;
		bottom: 0;
		right: 0;
		height: 0;
		background-color: #F3B93F;
		animation: orange 1.5s infinite;
		animation-direction: alternate;
	}

	div.logo div.red {
		border-right: 4px solid black;
		top: 0;
		bottom: 0;
		left: 0;
		width: 0;
		background-color: #EA5664;
		animation: red 1.5s infinite;
		animation-direction: alternate;
	}

	@keyframes border-before {
		0% {
			width: 0;
			height: 0;
			border-top-color: black;
			border-right-color: transparent;
		}
		12.49% {
			border-right-color: transparent;
		}
		12.5% {
			height: 0;
			width: 100%;
			border-top-color: black;
			border-right-color: black;
		}
		25%,
		100% {
			width: 100%;
			height: 100%;
			border-top-color: black;
			border-right-color: black;
		}
	}

	@keyframes border-after {
		0%,
		24.99% {
			width: 0;
			height: 0;
			border-left-color: transparent;
			border-bottom-color: transparent;
		}
		25% {
			width: 0;
			height: 0;
			border-left-color: transparent;
			border-bottom-color: black;
		}
		37.49% {
			border-left-color: transparent;
			border-bottom-color: black;
		}
		37.5% {
			height: 0;
			width: 100%;
			border-left-color: black;
			border-bottom-color: black;
		}
		50%,
		100% {
			width: 100%;
			height: 100%;
			border-left-color: black;
			border-bottom-color: black;
		}
	}

	@keyframes red {
		0%,
		50% {
			width: 0;
			opacity: 0;
		}
		50.01% {
			opacity: 1;
		}
		65%,
		100% {
			opacity: 1;
			width: 27%;
		}
	}

	@keyframes orange {
		0%,
		65% {
			height: 0;
			opacity: 0;
		}
		65.01% {
			opacity: 1;
		}
		80%,
		100% {
			opacity: 1;
			height: 50%;
		}
	}

	@keyframes white {
		0%,
		75% {
			width: 0;
			opacity: 0;
		}
		75.01% {
			opacity: 1;
		}
		90%,
		100% {
			opacity: 1;
			width: 23%;
		}
	}
</style>
</head>
<body>
	<div class="logo">
	  <div class="white"></div>
	  <div class="orange"></div>
	  <div class="red"></div>
  </div>
  <body>
</html>

截了张静态图。