html+css实现Loading动画
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.Loading{
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
animation-name: Loxing;
animation-duration: 2s; /*设置动画完成时间*/
animation-iteration-count: infinite; /*设置动画无限循环运行*/
animation-timing-function:linear; /*设置动画从头到尾的速度是相同的*/
}
.Loading>span{
width: 100%;
height: 100%;
border-top: 10px solid gold;
position: absolute;
border-radius: 30%;
box-sizing: border-box;
z-index: 20;
}
.Loading:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-left: 10px solid red;
border-radius: 30%;
transform: rotate(-30deg);
z-index: 30;
}
.Loading:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
border-right: 10px solid dodgerblue;
border-radius: 30%;
transform: rotate(30deg);
z-index: 10;
}
@keyframes Loxing {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.Loading>b{
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 130px;
animation-name: Loading_text;
animation-duration: 2s; /*设置动画完成时间*/
animation-iteration-count: infinite; /*设置动画无限循环运行*/
animation-timing-function:linear; /*设置动画从头到尾的速度是相同的*/
}
@keyframes Loading_text {
0%{
transform: rotate(0deg);
color: dodgerblue;
}
50%{
color: blueviolet;
}
100%{
transform: rotate(-360deg);
color:red;
}
}
style>
head>
<body>
<div class="Loading">
<span>span>
<b>Loading...b>
div>
body>
html>
效果图如下：
