61 lines
1001 B
Vue
61 lines
1001 B
Vue
<template>
|
|
<div class="line"></div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted } from "vue";
|
|
|
|
// const showLine = ref(false);
|
|
|
|
// const lineAnimation = computed(() => {
|
|
// showLine.value = true;
|
|
// });
|
|
// onMounted(() => {
|
|
// setTimeout(lineAnimation(), 1000);
|
|
// });
|
|
</script>
|
|
<style>
|
|
/* .line {
|
|
width: 2px;
|
|
height: 0;
|
|
background-color: #000;
|
|
margin: 0 auto;
|
|
transition: height 1s ease;
|
|
}
|
|
.line.active {
|
|
height: 150px;
|
|
} */
|
|
/* @keyframes myfirst {
|
|
100% {
|
|
height: 100px;
|
|
}
|
|
75% {
|
|
height: 75px;
|
|
}
|
|
50% {
|
|
height: 50px;
|
|
}
|
|
25% {
|
|
height: 25px;
|
|
}
|
|
0% {
|
|
height: 0px;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 100px;
|
|
background-color: aquamarine;
|
|
transform: rotateX(180deg);
|
|
position: absolute;
|
|
bottom: 200px;
|
|
left: 200px;
|
|
animation-name: myfirst;
|
|
animation-duration: 1s;
|
|
animation-timing-function: linear;
|
|
animation-delay: 2s;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
animation-play-state: running;
|
|
} */
|
|
</style>
|