Question

当用户进入页面时，大的VEGA徽标位于中心。像这样：[！[在此输入图像描述] [1]] [1] 2秒后，徽标开始向上移动。像这样：[！[在此输入图像描述] [2]] [2]

如何用css实现这一目标？这一切都必须在没有徘徊的情况下发生。

Answer 1

在不知道您的HTML结构的情况下，您可以执行以下操作：

＆＃13;

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px; /* Just for demo purpose to see the animation */
}
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px; /* Logo width */
  height: 200px; /* Logo height */
  margin-left: -100px; /* Logo width divided by two */
  margin-top: -100px; /* Logo height divided by two */
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  animation-name: movelogo; /* Name of animation */
  animation-duration: 1s; /* Duration of animation */
  animation-iteration-count: 1; /* Number of times animation is ran */
  animation-timing-function: ease-out; /* Easing of animation */
  animation-fill-mode: forwards;
  animation-delay: 2s; /* Delay before animation */
}
@keyframes movelogo {
  0% {
    top: 50%;
    left: 50%;
    width: 200px; /* Start logo width */
    height: 200px; /* Start logo height */
  }
  100% {
    top: 0;
    left: 0;
    margin-left: 10px; /* Remove the minus margin and set  your own (Could be also zero and just set top and left values */
    margin-top: 10px; /* Remove the minus margin and set  your own (Could be also zero and just set top and left values */
    width: 100px; /* End logo width */
    height: 100px; /* End logo height */
  }
}

＆＃13;

<div class="wrapper">
  <div class="logo"></div>
</div>

＆＃13;

适合您现有的HTML。您还可以在关键帧功能上添加-webkit-前缀等，以使其更具浏览器支持。

使用css进行动画处理而不使用悬停

1 个答案: