css实现扫描loading效果丨技术开发分享录

css实现扫描loading效果

{{ detail.nickname }}

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

"效果\n\n<style>\n    .zh-page{position:relative;width:300px;height:400px;border: 1px solid #ddd}\n    .zh-loading-wrap{position:absolute;left:50%;top:50%;z-index:1;margin:-140px 0 0 -140px;width:280px;height:280px;border-radius:50%;overflow:hidden}\n    .zh-loading{width:100%;height:100%;background-color:rgba(0,85,255,.05);-webkit-animation:loading 3s linear infinite;animation:loading 3s linear infinite}\n    .zh-loading:after{content:\"\";display:block;width:50%;height:50%;background:linear-gradient(45deg,transparent 50%,rgba(0,85,255,.2) 100%)}\n    @-webkit-keyframes loading{to{transform:rotate(360deg)}\n    }\n    @keyframes loading{to{transform:rotate(360deg)}\n    }\n</style>\n<div class=\"zh-page\">\n    <div class=\"zh-loading-wrap\">\n        <div class=\"zh-loading\"></div>\n    </div>\n</div>\n\n代码(主要就是恰当设置linar-gradient渐变属性)\n\n```markup\n<style>\n.zh-page {\n    position: relative;\n    width: 300px;\n    height: 400px\n}\n.zh-loading-wrap {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    z-index: 1;\n    margin: -140px 0 0 -140px;\n    width: 280px;\n    height: 280px;\n    border-radius: 50%;\n    overflow: hidden\n}\n.zh-loading {\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 85, 255, .05);\n    -webkit-animation: loading 3s linear infinite;\n    animation: loading 3s linear infinite\n}\n.zh-loading:after {\n    content: \"\";\n    display: block;\n    width: 50%;\n    height: 50%;\n    background: linear-gradient(45deg, transparent 50%, rgba(0, 85, 255, .2) 100%)\n}\n@-webkit-keyframes loading {\n    to {\n        transform: rotate(360deg)\n    }\n}\n@keyframes loading {\n    to {\n        transform: rotate(360deg)\n    }\n}\n</style>\n<div class=\"zh-page\">\n    <div class=\"zh-loading-wrap\">\n        <div class=\"zh-loading\"></div>\n    </div>\n</div>\n```"
PS:写作不易,如要转裁,请标明转载出处。

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

猜你想看