2021-08-13 css 炫酷的loading圖 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.chaos-loading {
overflow: hidden;
position: relative;
border-radius: 100%;
width: 200px;
height: 200px;
}
.chaos-loading::after {
display: block;
-webkit-filter: drop-shadow(2px 4px 6px #000);
filter: drop-shadow(2px 4px 6px #000);
line-height: 200px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
content: "Loading...";
}
.chaos-loading li {
position: absolute;
left: 0;
top: 0;
border-radius: 100%;
width: 100px;
height: 100px;
-webkit-filter: blur(25px);
filter: blur(25px);
-webkit-animation: move 2s linear infinite;
animation: move 2s linear infinite;
}
.chaos-loading li:nth-child(1) {
background-color: #f66;
}
.chaos-loading li:nth-child(2) {
background-color: #66f;
-webkit-animation-delay: -500ms;
animation-delay: -500ms;
}
.chaos-loading li:nth-child(3) {
background-color: #f90;
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.chaos-loading li:nth-child(4) {
background-color: #09f;
-webkit-animation-delay: -1.5s;
animation-delay: -1.5s;
}
@-webkit-keyframes move {
0%,
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
50% {
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
75% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes move {
0%,
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
50% {
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
75% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<body>
<p>
要點：帶混沌虛影的加載圈<br>
場景：加載提示
</p>
<div class="bruce flex-ct-x">
<ul class="chaos-loading">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
![十大酷炫屌的圖像懸停特效[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)