html+css实现加载动画

html+css实现加载动画_第1张图片
效果图如上,我不会做动图,啊啊啊,会的小伙伴教我一哈 [手动抱拳]
代码很简单,就直接上代码了


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			body{
				width: 100%;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #34495e;
				margin: 0;
				padding: 0;
				font-family: "montserrat",sans-serif;
			}
			.loading{
				width: 200px;
				height: 200px;
				box-sizing: border-box;
				border-radius: 50%;;
				border-top: 10px solid #e7473c;
				animation: loading1 2s linear infinite;
				position: relative;
			}
			.loading:before,.loading:after{
				content: "";
				position: absolute;
				left: 0;
				top: -10px;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				box-sizing: border-box;
			}
			.loading:before{
				border-top: 10px solid #e67e22;
				transform: rotate(120deg);
			}
			.loading:after{
				border-top: 10px solid #3498db;
				transform: rotate(240deg);
			}
			.loading span{
				position: absolute;
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				animation: loading2 2s linear infinite;
			}
			
			@keyframes loading1{
				to{
					transform: rotate(360deg);
				}
			}
			@keyframes loading2{
				to{
					transform: rotate(-360deg);
				}
			}
		style>
	head>
	<body>
		
		<div class="loading">
			<span>loading...span>
		div>
		
	body>
html>

你可能感兴趣的:(布局,css,html+css,加载动画)