最近有一个项目,我需要一些简单的动画进度条,但我不想影响网站的性能,也不想再安装一个 WordPress 插件。于是我开始寻找一种不需要 JavaScript 或 jQuery 的 CSS 解决方案,幸好我找到了一个不错的解决方案。
下面是完成后的预览效果。你可以根据自己的喜好调整大小、颜色、填充宽度等。它的速度快如闪电,在侧边栏中效果极佳,还能满足移动设备的需求。
See the Pen
css-progress-bars-wordpress-no-jquery by Mr. Kwong (@Mr-Kwong)
on CodePen.
感谢最初发布代码的 cherryflavourpez。我只是稍微改动了一下。下面是你需要的 HTML 代码。您可以在 WordPress 区块编辑器的 HTML 代码块中输入这些内容。
HTML
Text inside bar
CSS
下面是您需要的 CSS。您可以在 HTML 代码块、WordPress 定制器或 GeneratePress 等主题的元素/钩子中输入。
.meter { height: 30px; position: relative; background: #f3efe6; border-radius: 3px; overflow: hidden; margin: 5px 0 5px 0; } .meter span { display: block; height: 100%; } .progress { -webkit-animation: progressBar 3s ease-in-out; -webkit-animation-fill-mode: both; -moz-animation: progressBar 3s ease-in-out; -moz-animation-fill-mode: both; } .pg-green { background-color: #5db873; } .pg-orange { background-color: #fd761f; } .pg-yellow { background-color: #fabd52; } @-webkit-keyframes progressBar { 0% { width: 0; } 100% { width: 100%; } } @-moz-keyframes progressBar { 0% { width: 0; } 100% { width: 100%; } } .pg-text { margin: 0 5px; line-height: 30px; color: #ffffff; font-weight: 700; }
小结
代码有用吗?如果有,请在下面留言。分享您是如何调整代码使其更适合您的网站的。
内容没看懂? 不太想学习?想快速解决? 有偿解决: 联系专家
阿里云企业补贴进行中: 马上申请
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折,更有现金返利:同意关联,立享优惠
本文来自投稿,不代表新手站长_郑州云淘科技有限公司立场,如若转载,请注明出处:http://www.cnzhanzhang.com/1488.html