我这里是采用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">
<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">
<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>
最后就是生成背景随机数
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 +" ')"
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;
});
看下效果:
中间闪烁的其他页面忽略即可,本章是只讲述了自己封装的Loading组件的动画效果,大家直接使用完整代码即可
完整代码:
<template>
<div class="com__box" :style="backgourndStyle">
<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>