网站开发 前端 外包天元建设集团坑人
实现效果如下：
在不同的时间，显示不一样的效果（大小是一样的，截图时尺寸发生了变化）
具体实现代码如下：
<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>