当前位置：首页 > news >正文

css函数写个loading动画 | css预编译scss使用

news 2025/7/3 16:09:01

效果如下

如果你已经下载了scss的依赖，那么看二

一. vueCli使用scss，安装依赖

npm方式
npm install -D sass sass-loader
yarn方式
yarn add -D sass sass-loader

# 使用 npm 安装
npm install sass# 或使用 yarn 安装
yarn add sass

二. styles里新建一个style.scss文件

在main.js文件中导入样式文件style.scss

在要用的页面写好视图部分

 <div class="loading"><div class="loading_item"></div><div class="loading_item"></div><div class="loading_item"></div><div class="loading_item"></div><div class="loading_item"></div><div class="loading_item"></div></div>

style.scss页面粘贴如下代码

.loading{height: 100%;display: flex;justify-content: center;align-items: center;&_item{width: 20px;margin-right: 20px;background: green;border-radius: 15px;animation: loading 1s linear infinite;//线性，一直重复}
}
/* 高度依次上下，颜色可以按需改*/
@keyframes loading {0%,100%{height: 100px;background: rgb(48, 198, 6)n;}25% { height: 80px;   background: rgb(3, 146, 3);}50% {  height: 40px;  background: rgb(137, 231, 83); }80% { height: 20px;  background: rgb(171, 223, 149);}
}
/* 1-6个for循环，依次乘0.2s */
@for $i from 1 through 6{.loading_item:nth-child(#{$i}){animation-delay: #{$i*0.2s};}
}

上面参数详解：

animation: loading 1s linear infinite;

loading关键帧名称,1s动画完成一个周期所需的时间,linear控制动画速度曲线,这里是匀速，infinite是循环播放

Tips:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

‌animation-name‌：定义要绑定到选择器的关键帧名称。
‌animation-duration‌：定义动画完成一个周期所需的时间。
‌animation-timing-function‌：定义动画的速度曲线，如linear、ease、ease-in、ease-out、ease-in-out或cubic-bezier()。
‌animation-delay‌：定义动画开始前的等待时间。
‌animation-iteration-count‌：定义动画播放的次数，可以是具体的数字或infinite。
‌animation-direction‌：定义动画是否应该轮流反向播放，可能的值有normal、reverse、alternate、alternate-reverse。
‌animation-fill-mode‌：定义动画在播放之前和之后如何应用样式。
‌animation-play-state‌：定义动画的播放状态，可能的值有running和paused。