css图片由左至右逐渐展示(vue中实现)

最新推荐文章于 2024-06-04 17:36:46 发布

像素检测仪

最新推荐文章于 2024-06-04 17:36:46 发布

阅读量2.1k

点赞数

分类专栏： css 文章标签： vue.js css

本文链接：https://blog.csdn.net/qq_39981639/article/details/129062782

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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;
    }