<template>
|
<div class="txtwav">
|
<span v-for="(txt, idx) in strs" :key="'txt_' + idx" v-html="txt"></span>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "",
|
props: {
|
content: {
|
type: String,
|
required: true,
|
},
|
},
|
computed: {
|
strs() {
|
return this.content
|
.trim()
|
.split("")
|
.map((v) => (v == " " ? " " : v));
|
},
|
},
|
data() {
|
return {};
|
},
|
components: {},
|
methods: {},
|
|
mounted() {},
|
};
|
</script>
|
|
<style>
|
@keyframes flip-wave {
|
4% {
|
transform: translate3d(0, -20px, 0) rotate(720deg);
|
}
|
8% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
100% {
|
transform: translate3d(0, 0, 0) rotate(720deg);
|
}
|
}
|
</style>
|
|
<style scoped>
|
.txtwav span {
|
display: inline-block;
|
animation-duration: 6s;
|
animation-name: flip-wave;
|
animation-iteration-count: infinite;
|
}
|
.txtwav :nth-child(20n + 0) {
|
animation-delay: 0;
|
}
|
.txtwav :nth-child(20n + 1) {
|
animation-delay: 100ms;
|
}
|
.txtwav :nth-child(20n + 2) {
|
animation-delay: 200ms;
|
}
|
.txtwav :nth-child(20n + 3) {
|
animation-delay: 300ms;
|
}
|
.txtwav :nth-child(20n + 4) {
|
animation-delay: 400ms;
|
}
|
.txtwav :nth-child(20n + 5) {
|
animation-delay: 500ms;
|
}
|
.txtwav :nth-child(20n + 6) {
|
animation-delay: 600ms;
|
}
|
.txtwav :nth-child(20n + 7) {
|
animation-delay: 700ms;
|
}
|
.txtwav :nth-child(20n + 8) {
|
animation-delay: 800ms;
|
}
|
.txtwav :nth-child(20n + 9) {
|
animation-delay: 900ms;
|
}
|
.txtwav :nth-child(20n + 10) {
|
animation-delay: 1000ms;
|
}
|
.txtwav :nth-child(20n + 11) {
|
animation-delay: 1100ms;
|
}
|
.txtwav :nth-child(20n + 12) {
|
animation-delay: 1200ms;
|
}
|
.txtwav :nth-child(20n + 13) {
|
animation-delay: 1300ms;
|
}
|
.txtwav :nth-child(20n + 14) {
|
animation-delay: 1400ms;
|
}
|
.txtwav :nth-child(20n + 15) {
|
animation-delay: 1500ms;
|
}
|
.txtwav :nth-child(20n + 16) {
|
animation-delay: 1600ms;
|
}
|
.txtwav :nth-child(20n + 17) {
|
animation-delay: 1700ms;
|
}
|
.txtwav :nth-child(20n + 18) {
|
animation-delay: 1800ms;
|
}
|
.txtwav :nth-child(20n + 19) {
|
animation-delay: 1900ms;
|
}
|
</style>
|