在这个殊效的设计中,利用了CSS的animation属性来实现圆圈的渐隐切换效果。这个殊效的实现并没有用到任何JavaScript,这意味着它可以帮助提升网站的性能,同时也减少了代码的繁芜性。
这个殊效的视觉效果非常出色,它为用户供应了一个大略而都雅的等待界面。如果您正在探求一个大略而实用的加载动画,那么这个纯CSS实现的2圆渐隐切换的Loading殊效一定会是一个不错的选择。
希望这个殊效能够为您的网站增长一些活力和意见意义性!
<div class="loading"> <div></div> <div></div></div><style>.loading,.loading > div { position: relative; box-sizing: border-box;}.loading { display: block; font-size: 0; color: #000;}.loading.la-dark { color: #333;}.loading > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor;}.loading { width: 32px; height: 32px;}.loading > div { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 100%; opacity: 0.5; animation: ball-scale-pulse 2s infinite ease-in-out;}.loading > div:last-child { animation-delay: -1s;}.loading.la-sm { width: 16px; height: 16px;}.loading.la-sm > div { width: 16px; height: 16px;}.loading.la-2x { width: 64px; height: 64px;}.loading.la-2x > div { width: 64px; height: 64px;}.loading.la-3x { width: 96px; height: 96px;}.loading.la-3x > div { width: 96px; height: 96px;}@keyframes ball-scale-pulse { 0%, 100% { transform: scale(0); } 50% { transform: scale(1); }}</style>