css的小特效

最新推荐文章于 2024-07-24 13:45:34 发布

luckASD

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量291

点赞数

分类专栏：个人记事文章标签： css 布局 css特效

本文链接：https://blog.csdn.net/luckASD/article/details/52915370

版权

个人记事专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天写项目的时候，想起来有些东西加载的时候，需要一些特效，如果用图片的话，比较对页面加载会稍微影响，但是不能没有，不然影响用户体验，所以就想起来以前写的css做得小demo，今天给你们分享一下，勿喷哦

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 100%;
			padding: 3%;
			box-sizing: border-box;
			overflow: hidden;
		}
		.box .loader{
			width: 30%;
			float: left;
			height: 200px;
			margin-right: 3%;
			border: 1px solid #ccc;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;		
		}
		.loading-1{
			position: relative;
		}
		.loading-1 i{
			position: absolute;
			width: 30px;
			height: 30px;border-radius: 50%;
			background: #CCCCCC;
			left:-15px;
			top: -15px;
		}
		.loading-1 i:nth-child(1){
			animation: loading-1 1s linear infinite;
		}
		.loading-1 i:nth-child(2){
			animation: loading-1 1.8s linear infinite;
		}
		.loading-1 i:nth-child(3){
			animation: loading-1 2.6s linear infinite;
		}
		@keyframes loading-1{
			0%{transform: scale(0);opacity: 1;}
			5%{opacity: 1.5;}
			100%{transform: scale(3);opacity: 0;}
		}
		/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
		.loading-2{
			position: relative;
			
		}
		.loading-2 i{
			position: absolute;
			border-radius: 50%;
			border-top: 3px solid transparent;
			border-bottom: 3px solid transparent;
			border-left: 3px solid #333333;
			border-right: 3px solid #333333;	
		}
		.loading-2 i:nth-child(1){
			width: 40px;
			height: 40px;
			position: absolute;
			top: -20px;
			left: -20px;
			animation: op 1s linear infinite;
		}
		.loading-2 i:nth-child(2){
			width: 25px;
			height: 25px;
			position: absolute;
			left: -12.5px;
			top: -12.5px;
			animation: lo 1s linear infinite;
		}
		@keyframes op{
			0%{transform: rotate(0deg) scale(1)}
			50%{transform: rotate(180deg) scale(1.5)}
			100%{transform: rotate(360deg) scale(1) }
		}
		@keyframes lo{
			0%{transform: rotate(0deg) scale(1) }
			50%{transform: rotate(-180deg) scale(0.5)}
			100%{transform: rotate(-360deg) scale(1) }
		}
		/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
		.loading-3{
			position: relative;
			
		}
		.loading-3 i{
			width: 20px;height: 20px;
			border-radius: 50%;background: #333333;
			position: absolute;left: -10px;top:-10px;
		}
		.loading-3 i:nth-child(1){
			animation: ko 0.41s linear infinite;
			left: -10px;
		}
		.loading-3 i:nth-child(2){
			animation: ko 0.41s linear infinite;
			left: -30px;
		}
		.loading-3 i:nth-child(3){
			animation: ok 0.41s linear infinite;
			left: -50px;
		}
		.loading-3 i:nth-child(4){
			animation: ko 0.41s linear infinite;
			left: 10px;
		}
		.loading-3 i:nth-child(5){
			animation: ko 0.41s linear infinite;
			left: 30px;
		}
		@keyframes ok{
			20%{transform: translateY(-20px)}
			30%{transform: translateY(-20px) translateX(80px) }
			100%{transform: translateY(0px) translateX(80px)}
			}
			
			@keyframes ko{
			0%{transform: translate(0px);}
			100%{transform: translateX(-20px);}
		}
	</style>
</head>
<body>
	<div class="box">
			<div class="loader">
				<div class="loading-1">
					<i></i>
					<i></i>
					<i></i>
				</div>
			</div>
			<div class="loader">
				<div class="loading-2">
					<i class="op"></i>
					<i class="lo"></i>
				</div>
			</div>
			<div class="loader">
				<div class="loading-3">
					<i class="ok"></i>
					<i class="ko"></i>
					<i class="ko"></i>
					<i class="ko"></i>
					<i class="ko"></i>
				</div>
			</div>
		</div>
	
</body>
</html>