css实现图片从上往下显示效果

最新推荐文章于 2024-07-11 17:14:12 发布

冷酷吗喽

最新推荐文章于 2024-07-11 17:14:12 发布

阅读量919

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_72189003/article/details/129862761

版权

<template>
 <view class="box">
  <view class="gradient-wrapper">
   <image src="../../static/logo.png" mode=""></image>
  </view>
</view>
</template>

<script>
 
</script>

<style>
 
 
 .@keyframes wrapper-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes img-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.gradient-wrapper {
  display: inline-block;
  overflow: hidden;
  animation: wrapper-gradient 2s linear;
}
.gradient-wrapper>image {
  animation: img-gradient 2s linear;
}
</style>