使用CSS3实现loading动画

2019-12-31  本文已影响0人  MC桥默
项目中往往需要使用loading的动画,我们完全可以使用CSS3来实现,进而避免加载动图
loading.gif
<!-- HTML -->
<div class="simple-spinner"></div>
/* CSS */
        .simple-spinner {
            height: 48px;
            width: 48px;
            border: 5px solid rgba(150, 150, 150, 0.2);
            border-radius: 50%;
            border-top-color: rgb(150, 150, 150);
            animation: rotate 1s 0s infinite ease-in-out alternate;
        }
        @keyframes rotate {
            0%   { transform: rotate(0);      }
            100% { transform: rotate(360deg); }
        }
上一篇下一篇

猜你喜欢

热点阅读