css线条伸缩loading丨技术开发分享录

css线条伸缩loading

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"<style>\n.zh-loading{position:absolute;z-index:9;left:50%;top:50%;margin:-40px 0 0 -20px;width:80px;height:40px}\n.zh-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#90ee90;-webkit-animation:load 1s ease infinite;animation:load 1s ease infinite}\n@-webkit-keyframes load{\n    0%,100%{height:40px;background:#90ee90}\n    50%{height:70px;margin:-15px 0;background:#add8e6}\n}\n@keyframes load{\n    0%,100%{height:40px;background:#90ee90}\n    50%{height:70px;margin:-15px 0;background:#add8e6}\n}\n.zh-loading span:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}\n.zh-loading span:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}\n.zh-loading span:nth-child(4){-webkit-animation-delay:.6s;animation-delay:.6s}\n.zh-loading span:nth-child(5){-webkit-animation-delay:.8s;animation-delay:.8s}\n</style>\n<div style=\"position: relative;width: 300px;height: 300px;\">\n<div class=\"zh-loading\">\n    <span></span>\n    <span></span>\n    <span></span>\n    <span></span>\n    <span></span>\n</div>\n</div>\n\n```html\n<style>\n.zh-loading{position:absolute;z-index:9;left:50%;top:50%;margin:-40px 0 0 -20px;width:80px;height:40px}\n.zh-loading span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#90ee90;-webkit-animation:load 1s ease infinite;animation:load 1s ease infinite}\n@-webkit-keyframes load{\n    0%,100%{height:40px;background:#90ee90}\n    50%{height:70px;margin:-15px 0;background:#add8e6}\n}\n@keyframes load{\n    0%,100%{height:40px;background:#90ee90}\n    50%{height:70px;margin:-15px 0;background:#add8e6}\n}\n.zh-loading span:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}\n.zh-loading span:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}\n.zh-loading span:nth-child(4){-webkit-animation-delay:.6s;animation-delay:.6s}\n.zh-loading span:nth-child(5){-webkit-animation-delay:.8s;animation-delay:.8s}\n</style>\n<div class=\"zh-loading\">\n    <span></span>\n    <span></span>\n    <span></span>\n    <span></span>\n    <span></span>\n</div>\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看