<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Loading Text Outline Effect</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #333;}.loading-text {font-family: Arial, sans-serif;font-size: 30px;font-weight: bold;color: transparent;position: relative;text-transform: uppercase;letter-spacing: 5px;}.loading-text .text {position: relative;z-index: 1;}.loading-text::before {content: attr(data-text);position: absolute;top: 0;left: 0;color: transparent;-webkit-text-stroke: 2px #fff;z-index: 0;}.loading-text::after {content: attr(data-text);position: absolute;top: 0;left: 0;color: white;z-index: 0;clip-path: inset(0 100% 0 0);animation: loading 3s linear infinite;}@keyframes loading {0% {clip-path: inset(0 100% 0 0);}50% {clip-path: inset(0 0 0 0);}100% {clip-path: inset(0 0 0 100%);}}</style>
</head>
<body><div class="loading-text" data-text="Loading..."><span class="text">Loading...</span></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;}.dot-trail-loader {position: relative;width: 100px;height: 100px;}.dot {position: absolute;width: 15px;height: 15px;border-radius: 50%;background-color: #ff6b6b;animation: dotTrail 1.5s infinite ease-in-out;}.dot:nth-child(2) {animation-delay: 0.3s;}.dot:nth-child(3) {animation-delay: 0.6s;}@keyframes dotTrail {0% { transform: translate(0, 0); opacity: 1; }50% { transform: translate(50px, 50px); opacity: 0.5; }100% { transform: translate(100px, 0); opacity: 1; }}</style>
</head>
<body><div class="dot-trail-loader"><div class="dot"></div><div class="dot"></div><div class="dot"></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;}.star-spinner {width: 80px;height: 80px;border-radius: 50%;position: relative;animation: rotateStar 2s infinite linear;}.star {width: 80px;height: 80px;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-color: #ff6b6b;}@keyframes rotateStar {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style>
</head>
<body><div class="star-spinner"><div class="star"></div></div>
</body>
</html>
想要获取更多特效，点击免费使用小奈AI
