<!doctype html>
<html lang="zh">
<head>
<style>
#app{
width:100%;
height:500px;
--deg:36deg;
}
@keyframes loadingf{
0%{
--deg:36deg;
}
10% {
--deg: 72deg;
}
20% {
--deg: 108deg;
}
30% {
--deg: 144deg;
}
40% {
--deg: 180deg;
}
50% {
--deg: 216deg;
}
60% {
--deg: 252deg;
}
70% {
--deg: 288deg;
}
80% {
--deg: 324deg;
}
90% {
--deg: 360deg;
}
100% {
--deg: 0deg;
}
}
.box {
/*background-color: #FFE395;*/
width: 120px;
height: 120px;
transform-origin: 50% 50%;
transform: rotate(var(--deg)) ;
animation: loadingf 1s linear infinite forwards;
border-radius: 50%;
position: relative;
}
.loading {
position: relative;
width: 120px;
height: 120px;
}
.text-center {
position: absolute;
left:50%;
top: 50%;
color: #ff0000;
#margin-top: -10px;
transform: translateY(-50%) translateX(-50%);
font-size: 14px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(0,123,229,229);
position: absolute;
}
.circle.c1 {
opacity:1.0;
}
.circle.c2 {
opacity: 0.9;
}
.circle.c3 {
opacity: 0.8;
}
.circle.c4 {
opacity: 0.7;
}
.circle.c5 {
opacity: 0.6;
}
.circle.c6 {
opacity: 0.5;
}
.circle.c7 {
opacity: 0.4;
}
.circle.c8 {
opacity: 0.3;
}
.circle.c9 {
opacity: 0.2;
}
</style>
</head>
<body >
<div id="app" style="height:1000px;">
<div style="width: 800px; height: 800px; margin: 0 auto;">
<div class="loading" title="加载中">
<div class="box" >
<div class="circle c1"></div>
<div class="circle c2"></div>
<div class="circle c3"></div>
<div class="circle c4"></div>
<div class="circle c5"></div>
<div class="circle c6"></div>
<div class="circle c7"></div>
<div class="circle c8"></div>
<div class="circle c9"></div>
</div>
<span class="text-center">加载中...</span>
</div>
</div>
</div>
<script>
var app = document.querySelector("#app");
function setXY(deg,div) {
var r = 50 ;
var arc = Math.PI / 180 * deg;
var x = 50 + Math.sin(arc) * r;
var y = 50 + Math.cos(arc) * r;
div.style.left = x+"px";
div.style.top = y + "px";
}
var all = document.querySelectorAll(".circle");
for (var i = 0; i < all.length; i++) {
setXY(i*36, all[i])
}
</script>
</body>
</html>
非特殊说明，本文版权归HPay所有，转载请注明出处.
本文类型： Java工具