如何在WordPress中添加CSS进度条(无需jQuery或JavaScript)__wordpress教程

最近有一个项目,我需要一些简单的动画进度条,但我不想影响网站的性能,也不想再安装一个 WordPress 插件。于是我开始寻找一种不需要 JavaScript 或 jQuery 的 CSS 解决方案,幸好我找到了一个不错的解决方案。

如何在WordPress中添加CSS进度条(无需jQuery或JavaScript)__wordpress教程

下面是完成后的预览效果。你可以根据自己的喜好调整大小、颜色、填充宽度等。它的速度快如闪电,在侧边栏中效果极佳,还能满足移动设备的需求。

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

(0)
匿名
上一篇 2023年12月14日 下午4:30
下一篇 2023年12月14日 下午4:30

相关推荐

新手站长从“心”出发,感谢16年您始终不离不弃。