<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>闪光涟漪</title><style>.ripple-container {position: relative;width: 80px;height: 80px;overflow: hidden;border-radius: 50%;}.ripple {position: absolute;border: 10px solid red;border-radius: 50%;animation: ripple 2s infinite;opacity: 1;}@keyframes ripple {0% {width: 0;height: 0;opacity: 1;border-color: rgba(255, 0, 0, 1);top: 50%;left: 50%;transform: translate(-50%, -50%);}100% {width: 100%;height: 100%;opacity: 0;border-color: rgba(255, 0, 0, 0);top: 50%;left: 50%;transform: translate(-50%, -50%);}}</style>
</head>
<body><div class="ripple-container"><div class="ripple"></div></div>
</body>
</html>
