前端ABC<!DOCTYPE html>
<html>
<head>
<title>加载中</title>
<meta charset="UTF-8">
</head>
<body>
<style>
.loading1, .loading2, .loading3, .loading4, .loading5, .loading6, .loading7 {
float: left;
margin: 10px;
}
</style>
<style>
.loading1 {
position: relative;
}
.loading1 .left, .loading1 .right {
position: relative;
float: left;
width: 20px;
height: 40px;
overflow: hidden;
background-color: #E5E4E5;
}
.loading1 .left div, .loading1 .right div {
content: "";
position: absolute;
display: block;
width: 20px;
height: 40px;
background-color: #333;
}
.loading1 .left {
border-radius: 40px 0 0 40px;
}
.loading1 .left div {
border-radius: 40px 0 0 40px;
transform-origin: right center;
animation: circleLeft 3s linear infinite;
}
.loading1 .right {
border-radius: 0 40px 40px 0;
}
.loading1 .right div {
border-radius: 0 40px 40px 0;
transform-origin: left center;
animation: circleRight 3s linear infinite;
}
.loading1 .center {
position: absolute;
left: 3px;
top: 3px;
width: 34px;
height: 34px;
background-color: #fff;
border-radius: 50%;
}
@keyframes circleLeft {
0% {
transform: rotateZ(-180deg);
}
50% {
transform: rotateZ(-180deg);
}
75% {
transform: rotateZ(-90deg);
}
100% {
transform: rotateZ(0deg);
}
}
@keyframes circleRight {
0% {
transform: rotateZ(-180deg);
}
25% {
transform: rotateZ(-90deg);
}
50% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(0deg);
}
}
</style>
<div class="loading1">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="center">
<i></i>
</div>
</div>
<style>
.loading2 .left div {
animation: circleLeft2 6s linear infinite;
}
.loading2 .right div {
animation: circleRight2 6s linear infinite;
}
@keyframes circleLeft2 {
0% {
transform: rotateZ(-180deg);
}
25% {
transform: rotateZ(-180deg);
}
37.5% {
transform: rotateZ(-90deg);
}
50% {
transform: rotateZ(0deg);
}
75% {
transform: rotateZ(0deg);
}
87.5% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(180deg);
}
}
@keyframes circleRight2 {
0% {
transform: rotateZ(-180deg);
}
12.5% {
transform: rotateZ(-90deg);
}
25% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
62.5% {
transform: rotateZ(90deg);
}
75% {
transform: rotateZ(180deg);
}
100% {
transform: rotateZ(180deg);
}
}
</style>
<div class="loading1 loading2">
<div class="left">
<div></div>
</div>
<div class="right">
<div></div>
</div>
<div class="center">
<i></i>
</div>
</div>
<style>
.loading3 p {
height: 25px;
width: 25px;
margin: auto;
border: 2px solid #ccc;
border-bottom-color: #333;
border-radius: 100%;
animation: rotate3 1s linear infinite;
}
@keyframes rotate3 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="loading3">
<p></p>
</div>
<style>
.loading4 p {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #333;
}
.loading4 p:first-child {
animation: scale4 1s 0.15s infinite;
}
.loading4 p:nth-child(2) {
animation: scale4 1s 0.3s infinite;
}
.loading4 p:nth-child(3) {
animation: scale4 1s 0.45s infinite;
}
@keyframes scale4 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
<div class="loading4">
<p></p>
<p></p>
<p></p>
</div>
<style>
.loading5 p {
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
background-color: #333;
}
.loading5 p:first-child {
animation: scale5 1s 0.1s infinite;
}
.loading5 p:nth-child(2) {
animation: scale5 1s 0.2s infinite;
}
.loading5 p:nth-child(3) {
animation: scale5 1s 0.3s infinite;
}
.loading5 p:nth-child(4) {
animation: scale5 1s 0.4s infinite;
}
.loading5 p:nth-child(5) {
animation: scale5 1s 0.5s infinite;
}
@keyframes scale5 {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.4);
}
100% {
transform: scaleY(1);
}
}
</style>
<div class="loading5">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<style>
.loading6 {
position: relative;
width: 80px;
height: 80px;
}
.loading6 i {
position: absolute;
width: 15px;
height: 15px;
background-color: #000;
border-radius: 100%;
}
@keyframes loading6 {
0% {
transform: scale(0.4);
opacity: 0.5;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.4);
opacity: 0.5;
}
}
</style>
<div class="loading6">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<style>
.loading7 {
position: relative;
width: 80px;
height: 80px;
}
.loading7 i {
position: absolute;
width: 3px;
height: 10px;
background-color: #000;
}
@keyframes loading7 {
0% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
</style>
<div class="loading7">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<script>
window.onload = function () {
var eleI6 = document.querySelectorAll('.loading6 i'),
angle6 = 360 / eleI6.length;
for (var i = eleI6.length - 1; i >= 0; i--) {
eleI6[i].style.cssText += 'top:' + (34 - Math.sin(angle6 * i * Math.PI / 180) * 25) + 'px;left:' + (34 - Math.cos(angle6 * i * Math.PI / 180) * 25) + 'px;animation: loading6 1.8s ' + .22 * (i + 1) + 's infinite linear;';
}
var eleI7 = document.querySelectorAll('.loading7 i'),
angle7 = 360 / eleI7.length;
for (var i = eleI7.length - 1; i >= 0; i--) {
eleI7[i].style.cssText += 'top:' + (34 - Math.sin(angle7 * i * Math.PI / 180) * 15) + 'px;left:' + (34 - Math.cos(angle7 * i * Math.PI / 180) * 15)
+ 'px;transform:rotate(' + (angle7 * i + 90) + 'deg);animation: loading7 1s ' + .1 * (i + 1) + 's infinite linear;';
}
};
</script>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » css loading动画