You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
2.9 KiB
167 lines
2.9 KiB
<template>
|
|
<view class="piaoyi-text-animate3">
|
|
<div class="g-container">
|
|
<div class="g-number">{{text}}%</div>
|
|
<div class="g-contrast">
|
|
<div class="g-circle"></div>
|
|
<!-- <view class="g-bubbles">
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
<view class="li"></view>
|
|
</view> -->
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
text: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.piaoyi-text-animate3 {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: #f7f6f6 !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.g-number {
|
|
position: absolute;
|
|
width: 300px;
|
|
top: 27%;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
z-index: 10;
|
|
color: #000;
|
|
}
|
|
|
|
.g-container {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 400px;
|
|
margin: auto;
|
|
}
|
|
|
|
.g-contrast {
|
|
// filter: contrast(10) hue-rotate(0);
|
|
width: 300px;
|
|
height: 400px;
|
|
background-color: #f7f6f6 !important;
|
|
overflow: hidden;
|
|
animation: hueRotate 10s infinite linear;
|
|
}
|
|
|
|
.g-circle {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
box-sizing: border-box;
|
|
filter: blur(8px);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(0);
|
|
width: 200px;
|
|
height: 200px;
|
|
// background-color: #00ff6f;
|
|
background-color: #0abf49;
|
|
border-radius: 42% 38% 62% 49% / 45%;
|
|
animation: rotate 10s infinite linear;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 176px;
|
|
height: 176px;
|
|
top: 40%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
background-color: #f7f6f6;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.g-bubbles {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
width: 100px;
|
|
height: 40px;
|
|
transform: translate(-50%, 0);
|
|
border-radius: 100px 100px 0 0;
|
|
background-color: #00ff6f;
|
|
filter: blur(5px);
|
|
}
|
|
|
|
.li {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: #00ff6f;
|
|
}
|
|
|
|
@for $i from 0 through 15 {
|
|
.li:nth-child(#{$i}) {
|
|
$width: 15 + random(15) + px;
|
|
left: 15 + random(70) + px;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: $width;
|
|
height: $width;
|
|
animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
50% {
|
|
border-radius: 45% / 42% 38% 58% 49%;
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(720deg);
|
|
}
|
|
}
|
|
|
|
@keyframes moveToTop {
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: .1;
|
|
transform: translate(-50%, -180px);
|
|
}
|
|
}
|
|
|
|
@keyframes hueRotate {
|
|
100% {
|
|
filter: contrast(15) hue-rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|