实现效果如下:
在不同的时间,显示不一样的效果(大小是一样的,截图时尺寸发生了变化)
具体实现代码如下:
js
<script setup>
import {ref} from "vue";
const max_hight = ref('40px')
const min_hight = ref('2px')
</script>
<template>
<div class="loading loading-2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</template>
<style scoped>
* {
padding: 0;
margin: 0;
list-style: none;
}
.loading {
width: 300px;
height: v-bind(max_hight);
margin: 100px auto;
}
.loading ul {
height: v-bind(max_hight);
width: 65px;
margin: 0 auto;
display: flex;
align-items: center;
}
.loading ul li {
margin: 0 2px;
width: 3px;
height: v-bind(max_hight);
background-color: darkgrey;
}
/* 1) 定义动画 */
@keyframes ani-height {
0% {
height: v-bind(max_hight);
}
50% {
height: v-bind(min_hight);
}
100% {
height: v-bind(max_hight);
}
}
/* 2) 使用动画 */
li:nth-child(1) {
animation: ani-height .5s .1s linear infinite;
}
li:nth-child(2) {
animation: ani-height .5s .05s linear infinite;
}
li:nth-child(3) {
animation: ani-height .5s .2s linear infinite;
}
li:nth-child(4) {
animation: ani-height .5s .25s linear infinite;
}
li:nth-child(5) {
animation: ani-height .5s .15s linear infinite;
}
</style>