css实现螺纹进度条丨技术开发分享录

css实现螺纹进度条

{{ detail.nickname }}

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

"> 主要是通过间隔颜色、背景大小及旋转角度实现的,控制在合知的值即可\n\n正常情况\n\n<style type=\"text/css\">\n    .zh-progressbar-01 {\n        width: 300px;\n        height: 150px;\n        background: linear-gradient(transparent 0, transparent 10px, #4dafe2 10px, #4dafe2 20px, transparent 20px, transparent 30px, #4dafe2 30px);\n        background-size: 20px 20px;\n    }\n</style>\n<div class=\"zh-progressbar-01\"></div>\n\n```markup\n<style type=\"text/css\">\n    .zh-progressbar {\n        width: 300px;\n        height: 150px;\n        background: linear-gradient(transparent 0, transparent 10px, #4dafe2 10px, #4dafe2 20px, transparent 20px, transparent 30px, #4dafe2 30px);\n        background-size: 20px 20px;\n    }\n</style>\n<div class=\"zh-progressbar\"></div>\n```\n\n添加角度后\n\n<style type=\"text/css\">\n    .zh-progressbar-02 {\n        width: 300px;\n        height: 15px;\n        background: linear-gradient(60deg, transparent 0, transparent 10px, #4dafe2 10px, #4dafe2 20px, transparent 20px, transparent 30px, #4dafe2 30px);\n        background-size: 20px 20px;\n    }\n</style>\n<div class=\"zh-progressbar-02 zh-mt-10\"></div>\n\n```markup\n<style type=\"text/css\">\n    .zh-progressbar {\n        width: 300px;\n        height: 15px;\n        background: linear-gradient(60deg, transparent 0, transparent 10px, #4dafe2 10px, #4dafe2 20px, transparent 20px, transparent 30px, #4dafe2 30px);\n        background-size: 20px 20px;\n    }\n</style>\n<div class=\"zh-progressbar\"></div>\n```"
PS:写作不易,如要转裁,请标明转载出处。

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

猜你想看