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

上海外贸网站seo网站优化培训公司

wzjs 2025/9/8 6:51:23

上海外贸网站,seo网站优化培训公司,建设网站的时候,html5 微网站源码效果如下如果你已经下载了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里新…

效果如下

如果你已经下载了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。