CSS实现柱子占比效果,并实现初始向右走的动画

1、实现方式

1、把具体的所占整体的百分比,写在第二个div中;

2、把动画效果和颜色写在第三个div中。

(content-box:用于表达100%的柱子;rate-box:用于表达此项所占的百分比;color-animation:用于实现具体的动画效果。)

2、完整代码

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content-box {
            margin: 100px auto;
            width: 265px;
            height: 10px;
            background: #36596C;
        }
        .rate-box {
            height: 100%;
        }
        .color-animation {
            height: 100%;
            animation: move 2s ease forwards;
            background: linear-gradient(270deg, #1890FF 0%, #1EE7E7 100%);
        }
        @keyframes move {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="content-box">
        <div class="rate-box" style="width: 60%;">
            <div class="color-animation"></div>
        </div>
    </div>
</body>
</html>

3、效果图:

相关推荐
麦兜*37 分钟前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑1 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室1 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~1 小时前
重学前端004 --- html 表单
前端·html
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man2 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中2 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术2 小时前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作2 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
LuckyLay3 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust