在网上找了两个动画特效:一个是齿轮旋转动画,一个是文字提示动画。用于项目中,特此记录。
相关代码:
<template>
<div class="bidLoadingBox">
<div class="loader">
<div class="loader_overlay"></div>
<div class="loader_cogs">
<div class="loader_cogs__top">
<div class="top_part"></div>
<div class="top_part"></div>
<div class="top_part"></div>
<div class="top_hole"></div>
</div>
<div class="loader_cogs__left">
<div class="left_part"></div>
<div class="left_part"></div>
<div class="left_part"></div>
<div class="left_hole"></div>
</div>
<div class="loader_cogs__bottom">
<div class="bottom_part"></div>
<div class="bottom_part"></div>
<div class="bottom_part"></div>
<div class="bottom_hole"></div>
</div>
</div>
</div>
<div class="bidLoadingText">{{ biddersLoadingText }}</div>
</div>
</template>
<script>
export default {
name: 'BidLoading',
props: {
biddersLoadingText: {
type: String,
default: () => ''
}
}
}
</script>
<style scoped lang="less">
.bidLoadingBox {
position: relative;
margin-bottom: 20px;
.loader {
position: relative;
width: 74px;
height: 74px;
.loader_overlay {
width: 40px;
height: 40px;
background: transparent;
box-shadow: 0px 0px 0px 18px rgba(255, 255, 255, 0.67),
0px 0px 20px 0px rgba(0, 0, 0, 0.16) inset;
border-radius: 100%;
z-index: 3;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loader_cogs {
z-index: 2;
width: 50px;
height: 50px;
position: absolute;
left: 20px;
top: -10px;
right: 0;
bottom: 0;
margin: auto;
.loader_cogs__top {
position: relative;
width: 30px;
height: 30px;
transform-origin: 15px 15px;
-webkit-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
div {
&.top_part {
width: 30px;
border-radius: 4px;
position: absolute;
height: 30px;
background: #f98db9;
}
&:nth-of-type(1) {
transform: rotate(30deg);
}
&:nth-of-type(2) {
transform: rotate(60deg);
}
&:nth-of-type(3) {
transform: rotate(90deg);
}
&.top_hole {
width: 15px;
height: 15px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
.loader_cogs__left {
position: relative;
width: 20px;
transform: rotate(16deg);
top: 7px;
transform-origin: 10px 10px;
animation: rotate_left 10s 0.1s infinite reverse linear;
left: -6px;
height: 20px;
div {
&.left_part {
width: 20px;
border-radius: 1px;
position: absolute;
height: 20px;
background: #409eff;
}
&:nth-of-type(1) {
transform: rotate(30deg);
}
&:nth-of-type(2) {
transform: rotate(60deg);
}
&:nth-of-type(3) {
transform: rotate(90deg);
}
&.left_hole {
width: 10px;
height: 10px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
.loader_cogs__bottom {
position: relative;
width: 20px;
top: -18px;
transform-origin: 10px 10px;
-webkit-animation: rotate_left 10.2s 0.4s infinite linear;
animation: rotate_left 10.2s 0.4s infinite linear;
transform: rotate(4deg);
left: 24px;
height: 20px;
div {
&.bottom_part {
width: 20px;
border-radius: 0;
position: absolute;
height: 20px;
background: #ffcd66;
}
&:nth-of-type(1) {
transform: rotate(30deg);
}
&:nth-of-type(2) {
transform: rotate(60deg);
}
&:nth-of-type(3) {
transform: rotate(90deg);
}
&.bottom_hole {
width: 10px;
height: 10px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate_left {
0% {
transform: rotate(16deg);
}
100% {
transform: rotate(376deg);
}
}
}
}
.bidLoadingText {
font-size: 36px;
line-height: 74px;
position: absolute;
left: 100px;
top: 0;
letter-spacing: 0.2rem;
background-image: -webkit-linear-gradient(
left,
#f98db9,
#ffcd66 25%,
#409eff 50%,
#ffcd66 75%,
#409eff
);
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-background-clip: text;
background-size: 200% 100%;
-webkit-background-size: 200% 100%;
animation: maskedAnimation 4s infinite linear;
-webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
}
</style>