<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.wave-loader {display: flex;justify-content: center;align-items: center;height: 100vh;}.wave {width: 80px;height: 80px;background-color: #ff6b6b;border-radius: 50%;position: relative;animation: waveMove 1.5s infinite linear;}.wave:before, .wave:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background-color: rgba(255, 107, 107, 0.4);animation: waveExpand 1.5s infinite linear;}.wave:after {background-color: rgba(255, 107, 107, 0.2);animation-delay: 0.5s;}@keyframes waveMove {0%, 100% { transform: rotate(0); }50% { transform: rotate(360deg); }}@keyframes waveExpand {0% { transform: scale(1); opacity: 1; }100% { transform: scale(1.5); opacity: 0; }}</style>
</head>
<body><div class="wave-loader"><div class="wave"></div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;}.swirl-loader {width: 50px;height: 50px;border: 5px solid transparent;border-top: 5px solid #ff6b6b;border-bottom: 5px solid #f5576c;border-radius: 50%;animation: swirlSpin 1s infinite linear;}@keyframes swirlSpin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style>
</head>
<body><div class="swirl-loader"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;}.cube-loader {display: inline-block;transform: perspective(120px) rotateX(45deg) rotateY(45deg);animation: spinCube 3s infinite linear;}.cube {width: 50px;height: 50px;position: absolute;background-color: #ff6b6b;animation: cubeColors 3s infinite ease-in-out;}@keyframes cubeColors {0%, 100% { background-color: #ff6b6b; }25% { background-color: #f093fb; }50% { background-color: #f5576c; }75% { background-color: #ffcb57; }}@keyframes spinCube {0% { transform: rotateX(0deg) rotateY(0deg); }100% { transform: rotateX(360deg) rotateY(360deg); }}</style>
</head>
<body><div class="cube-loader"><div class="cube"></div></div>
</body>
</html>
想要获取更多特效，点击免费使用小奈AI
