进入我的博客

这里有您在其他地方看不到的web前端方面的技术、知识及资源

这里有您在其他地方看不到的web前端方面的技术、知识及资源

张鑫旭-鑫空间-鑫生活

it's my whole life!

我的微码

« 查看全部微码

按钮加一个类名自动变菊花loading状态无图片版

2017-03-04 11:55

按钮加一个类名自动变菊花loading状态无图片版,使用便捷,效果好,开销小,CSS3动画旋转,IE10+和其它现代浏览器支持

相关文章:暂无

完整代码

/* 按钮loading */
a[class*=-btn].loading, 
label[class*=-btn].loading {
    position: relative;
}
a[class*=-btn].loading::first-line, 
label[class*=-btn].loading::first-line {
    color: transparent;
}
a[class*=-btn].loading::before, 
label[class*=-btn].loading::before {
    width: 4px; height: 4px;
    margin: auto;
    content: '';
    -webkit-animation: spinZoom 1s steps(8) infinite;
    animation: spinZoom 1s steps(8) infinite;
    border-radius: 100%;
    box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor;
    /* center */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
/* loading动画 */
@-webkit-keyframes spinZoom {
    0% {
        -webkit-transform: scale(.75) rotate(0);
    }
    100% {
        -webkit-transform: scale(.75) rotate(360deg);
    }
}
@keyframes spinZoom {
    0% {
        transform: scale(.75) rotate(0);
    }
    100% {
        transform: scale(.75) rotate(360deg);
    }
}

标签:CSS

分享:新浪微博

评论

0人参与,0条评论)

抱歉,服务器忙,未能成功提交,稍后重试。