淘先锋技术网

首页 1 2 3 4 5 6 7

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