css图片由左至右逐渐展示具体代码实例:
html部分:
<div :class="[loaded ? 'gradient-wrapper' : '']">
<img :src="traceMapBg">
</div>
js部分:
const loaded = ref(false)
onBeforeMount(() => {
loaded.value = true
})
css部分:
@keyframes wrapper-gradient {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes img-gradient {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.gradient-wrapper {
display: inline-block;
overflow: hidden;
animation: wrapper-gradient 2s linear;
}
.gradient-wrapper>img {
animation: img-gradient 2s linear;
}
translateX改成translateY为从上向下展开