大家好,今天我來和大家分享一下如何使用CSS實現仿微信的Loading效果。
/*首先我們需要先定義一下樣式*/ .loading { width: 50px; /*寬*/ height: 50px; /*高*/ border: 5px solid #eee; /*邊框*/ border-top: 5px solid #1AAD19; /*上邊框*/ border-radius: 50%; /*圓角*/ animation: spin 1s linear infinite; /*旋轉*/ } /*接下來,我們定義一下旋轉的動畫樣式*/ @keyframes spin { from { transform: rotate(0deg); /*從0度開始旋轉*/ } to { transform: rotate(360deg); /*旋轉一周,也就是360度*/ } } /*最后,我們只需要在HTML中插入對應的loading標簽即可*/
通過以上的CSS代碼,我們就成功實現了一個類似于微信Loading效果的動畫。希望對大家有所幫助。
上一篇css以底部為基準
下一篇java的字符串和io流