Vue3+ts——动画Loading以及引入本地随机背景效果

已于 2022-10-17 16:33:29 修改
阅读量1.8k 收藏 6
点赞数 1
分类专栏： TS Vue3 文章标签： css3 css 动画
于 2022-09-20 17:01:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanchen_J/article/details/126956935
版权
Vue3 同时被 2 个专栏收录
43 篇文章 8 订阅
订阅专栏
TS
21 篇文章 2 订阅
订阅专栏

Vue3+ts——随机生成背景图片

我这里是采用loading为例子制作的随机背景效果（底部附上代码和成品效果展示）

这里需要注意一下，数组的格式必须要用下面这种格式创建对象

new URL("../assets/image/myFileImg/nv.png", import.meta.url).href;
或者使用这种方法引入本地图片路径 
<div :style="'background-image: url(' + state.icon+ '); background-size:100% 100%;width:100%;height:100vh'">
</div>

const state = reactive({
  icon: new URL("../assets/image/index1.jpg", import.meta.url).href,
});

如果使用直接使用“…/assets/image/myFileImg/nv.png” Vue3是不支持的。

随机色最好是使用computed去写，这里原因就不多说了。

首先先做出加载的动画效果
<template>
  <div class="com__box" :style="backgourndStyle">
    <!-- loading -->
    <div class="loading">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.com__box {
  width: 100%;
  // background-color: transparent;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  display: flex;
  height: calc(100vh - 50px);
  align-items: center;
  justify-content: center;
}
.loading {
  width: 20px;
  height: 20px;
  position: relative;
  animation: animationContainer 1s ease infinite;
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
}

.shape-1 {
  background-color: #845ec2;
  left: 0;
  border-top-left-radius: 100%;
  animation: animationShape1 0.5s ease infinite alternate;
}

.shape-2 {
  background-color: #009efa;
  right: 0;
  border-top-right-radius: 100%;
  animation: animationShape2 0.5s ease infinite alternate;
}

.shape-3 {
  background-color: #00d2fc;
  bottom: 0;
  border-bottom-left-radius: 100%;
  animation: animationShape3 0.5s ease infinite alternate;
}

.shape-4 {
  background-color: #4ffbdf;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 100%;
  animation: animationShape4 0.5s ease infinite alternate;
}

@keyframes animationContainer {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animationShape1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, -3px);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, -3px);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, 3px);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, 3px);
  }
}
</style>

效果做好后可以做一个文字的动画效果。

文字动画效果

cssAnimatopy
下方代码中的 @import "../assets/css/animatopy.css";在上方的链接中查看即可

<template>
  <div class="com__box" :style="backgourndStyle">
    <!-- loading -->
    <div class="loading">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
    <div class="p animated rubberBand">
      加载中请稍后...
    </div>
  </div>
</template>
<style lang="less" scoped>
/* 这里需要引入创建动画样式 */
@import "../assets/css/animatopy.css";
.com__box {
  width: 100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  display: flex;
  height: calc(100vh - 50px);
  align-items: center;
  justify-content: center;
  .p {
    margin-left: 20px;
    font-size: 24px;
    font-family: FBDXYT;
    font-weight: bold;
    background-image: -webkit-linear-gradient(
      left,
      #845ec2,
      #009efa,
      #00d2fc,
      #4ffbdf
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>

最后就是生成背景随机数

  1. 创建一个数组，路径要以这种格式写（当然你也可以用更好的方法来拆开写）
 let arr = reactive([
    { bg: new URL("../assets/image/01.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/02.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/03.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/04.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/05.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/06.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/07.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/08.jpg",import.meta.url).href },
    {
      bg: "../assets/image/01.jpg",
    },
  ]);
  1. 获取数组对象中的随机数
let imgName  = arr[Math.floor(Math.random() * arr.length)].bg;
let style = "background: url('"+ imgName +" ')"
  1. 放在计算属性中
const backgourndStyle = computed(() => {
  let arr = reactive([
    { bg: new URL("../assets/image/01.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/02.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/03.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/04.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/05.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/06.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/07.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/08.jpg",import.meta.url).href },
    {
      bg: "../assets/image/01.jpg",
    },
  ]);
  let imgName  = arr[Math.floor(Math.random() * arr.length)].bg;
  let style = "background: url('"+ imgName +" ')"
  return style;
});
  1. 最后将计算属性通过动态style放在标签中 <div class="com__box" :style="backgourndStyle"></div>

看下效果：
请添加图片描述
中间闪烁的其他页面忽略即可，本章是只讲述了自己封装的Loading组件的动画效果，大家直接使用完整代码即可
完整代码：

<template>
  <div class="com__box" :style="backgourndStyle">
    <!-- loading -->
    <div class="loading">
      <div class="shape shape-1"></div>
      <div class="shape shape-2"></div>
      <div class="shape shape-3"></div>
      <div class="shape shape-4"></div>
    </div>
    <div class="p animated rubberBand">
      加载中请稍后...
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, onMounted, reactive, computed } from "vue";

const backgourndStyle = computed(() => {
  let arr = reactive([
    { bg: new URL("../assets/image/01.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/02.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/03.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/04.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/05.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/06.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/07.jpg",import.meta.url).href },
    { bg: new URL("../assets/image/08.jpg",import.meta.url).href },
    {
      bg: "../assets/image/01.jpg",
    },
  ]);
  let imgName  = arr[Math.floor(Math.random() * arr.length)].bg;
  let style = "background: url('"+ imgName +" ')"
  return style;
});

</script>
<style lang="less" scoped>
@import "../assets/css/animatopy.css";
.com__box {
  width: 100%;
  // background-color: transparent;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  display: flex;
  height: calc(100vh - 50px);
  align-items: center;
  justify-content: center;
  .p {
    margin-left: 20px;
    font-size: 24px;
    font-family: FBDXYT;
    font-weight: bold;
    background-image: -webkit-linear-gradient(
      left,
      #845ec2,
      #009efa,
      #00d2fc,
      #4ffbdf
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.loading {
  width: 20px;
  height: 20px;
  position: relative;
  animation: animationContainer 1s ease infinite;
}

.shape {
  width: 10px;
  height: 10px;
  position: absolute;
}

.shape-1 {
  background-color: #845ec2;
  left: 0;
  border-top-left-radius: 100%;
  animation: animationShape1 0.5s ease infinite alternate;
}

.shape-2 {
  background-color: #009efa;
  right: 0;
  border-top-right-radius: 100%;
  animation: animationShape2 0.5s ease infinite alternate;
}

.shape-3 {
  background-color: #00d2fc;
  bottom: 0;
  border-bottom-left-radius: 100%;
  animation: animationShape3 0.5s ease infinite alternate;
}

.shape-4 {
  background-color: #4ffbdf;
  right: 0;
  bottom: 0;
  border-bottom-right-radius: 100%;
  animation: animationShape4 0.5s ease infinite alternate;
}

@keyframes animationContainer {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animationShape1 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, -3px);
  }
}

@keyframes animationShape2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, -3px);
  }
}

@keyframes animationShape3 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-3px, 3px);
  }
}

@keyframes animationShape4 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(3px, 3px);
  }
}
</style>
Southern Wind
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
Vue3+Ts+Vite项目(第十一篇)——项目启动loading加载效果
做笔记/记录遇到的前端bug
08-21 1338
一分钟实现vue3项目加载loading效果，vue-pure-admin项目加载loading效果实现
vue3+ts 封装防抖函数加上加载动画超时关闭动画
qq_59517460的博客
01-19 665
为了防止按钮连续点击造成不必要的多次触发,给按钮触发加上防抖还是很有必要的。使用: 给按钮绑定debounceEvent。
Vue3项目中加载动画的实现
最新发布
fafafafa_fa的博客
05-24 524
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
NFS下载文件报错：Loading: *** ERROR: File lookup fail
MCJ的博客
01-31 407
# Number of servers to start up RPCNFSDCOUNT="-V 2 8" # Runtime priority of server (see nice(1)) RPCNFSDPRIORITY=0 # Options for rpc.mountd. # If you have a port-based firewall, you might want to set up # a fixed port here using the --port option. For m.
粒子动态背景--在Vue3中使用VueParticles
Kylin的博客
12-08 9181
前言 在公司某项目登录界面见到粒子动画背景，也想将这个动画效果用在自己的项目上，起初以为直接安装vue-particles就可以了，结果自己的项目是Vue3的，不兼容。根据网上调研，在Vue3中可以使用particles.vue3实现这个粒子动画 particles.vue3官网 https://particles.js.org/ Demos 就是一个演示，在里面可以自己更改一些配置 Presets 就是预设的动画，点进去可以看到效果 API Docs 文档 CodePen 代
使用 Vue 创建一个简单的 Loading 动画
CharlesHsuu的博客
07-23 850
使用Vue创建一个简单的加载动画
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue3 + ts 基于elementplus 后台管理系统模板.zip
05-13
vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统模板 vue3 + ts 基于elementplus 后台管理系统...
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
vue 全局封装loading加载教程(全局监听)
01-18
前言： 为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。 第一步： 建立loading.vue <template> <div class=loading> <van size=36px>加载中...</van> </div> </template> [removed] export default { props: {}, data() { return {}; }, computed: {}, created() {
vue 动态设置背景图片，并设置背景图片的渐变色
askuld的博客
07-20 7285
父div使用position:relative解决，子div使用position:absolute属性；四、如何将背景图片设置在右下角。采用绝对定位和相对定位解决问题。一、VUE动态设置背景图片。二、静态图片引入方式。三、设置背景图片渐变。
vue自定义指令v-loading（vue2和vue3)
热门推荐
weixin_58031521的博客
02-16 1万+
vue实现自定义指令v-loading（包含vue2及vue3的写法）
使用vue3封装一个loading加载动画效果
weixin_55541470的博客
12-14 667
【代码】使用vue3封装一个loading加载动画效果。
vue3 hooks 组件封装
guorui999的博客
01-28 3502
vue3 hooks 组件封装
全局封装loading 加载样式 vue3
hfyldx的博客
08-18 1704
全局封装加载样式
如何使用vant库的loading组件
luoxiaonuan_hi的博客
08-16 7263
第二步，在vuex中定义全局变量loading，定义修改loading变量显示隐藏的方法。第三步，在App.vue主文件中引入全局变量loading在页面使用。第五步，在请求拦截器中和响应拦截器中统一设置loading。第一步，main.js文件引入下载的loading。...
使用loading动画让你的条件渲染页面更高级
知识虔诚的信徒，探索所有未知是信徒毕生的信仰
02-20 4001
如何让你的条件渲染和页面跳转更丝滑、更高级。也许只需添加一个loading动画就能做到！
vue3+ts+pinia 全局loading
11-02
Vue3中使用TypeScript结合Pinia来实现全局loading的方式如下： 首先，我们需要安装vue-router、pinia和axios，可以使用以下命令进行安装： ``` npm install vue-router@next pinia axios ``` 接下来我们创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值