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、效果图:

相关推荐
萌萌哒草头将军4 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中4 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊5 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj5 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝5 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3115 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion5 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜5 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾5 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*5 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm