WordPress纯CSS实现无JS进度条动画教程

• 使用技巧

最近在项目中需要用到简洁的动画进度条，但又担心影响网站性能，也不想额外安装 WordPress 插件。经过一番寻找，我发现了一种纯 CSS 实现的解决方案，完美避免了 JavaScript 或 jQuery 的依赖。下面是最终效果预览，你可以根据自己的需求调整大小、颜色和填充宽度等参数。这种方案运行速度极快，特别适合在侧边栏中使用，同时也能完美适配移动设备。See the Pen css-progress-bars-wordpress-no-jquery by Mr. Kwong (@Mr-Kwong) on CodePen. 感谢最初发布代码的 cherryflavourpez，我只是在此基础上做了些微调。

下面是你可以直接使用的 HTML 代码，可以直接复制到 WordPress 区块编辑器的 HTML 代码块中。

“`html


75%

“`

接下来是关键的 CSS 代码，你可以将其添加到 HTML 代码块、WordPress 定制器或 GeneratePress 等主题的元素/钩子中。

“`css
.meter {
height: 30px;
position: relative;
background: #f3efe6;
border-radius: 3px;
overflow: hidden;
margin: 5px 0;
}

.meter span {
display: block;
height: 100%;
}

WordPress纯CSS实现无JS进度条动画教程

.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;
}
“`

小结
这段代码是否对你有帮助？如果有，欢迎在下方留言，并分享你是如何调整代码以适配自己网站的。

文章网址：https://www.wpbull.com/jiqiao/1655.html
赞 (0)
上一篇 2025年1月12日 am9:37
下一篇 2025年1月12日 am9:37

相关推荐