时间戳

首页 > 解决方案 > CSS，如何在不影响内联文本的情况下向下或向上移动？

html - CSS，如何在不影响内联文本的情况下向下或向上移动？

问题描述

标签： htmlcssfont-awesomefont-awesome-5

解决方案

你所需要的只是变换：translateY

li {
  list-style-type: none;
}

.envelope {
  margin-right: 10px;
  animation: upDown 1s infinite ease;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">

<li><i class="fa fa-envelope envelope" aria-hidden="true"></i><a href="">Email:</a></li>

推荐阅读