大家好,今天我来和大家分享一下如何使用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效果的动画。希望对大家有所帮助。