開始效果
呼吸效果
實現代碼
<div class="container"><div class="breathing-light"></div>
</div><style>html,body {height: 100%;background-color: white;}.container {padding: 100px;}.container .breathing-light {width: 20px;height: 20px;border-radius: 100%;animation: 2s shadowBreath ease-out infinite normal;background: rgba(42, 170, 255, 1);}@keyframes shadowBreath {0%,100% {transform: scale(0.9);box-shadow: 0 0 4px 1px rgba(42, 170, 255, 0.7);}50% {transform: scale(1.5);box-shadow: 0 0 30px 5px rgb(42, 170, 255);}}
</style>?
