时间戳

首页 > 解决方案 > 如何使用 CSS 在锚标签上添加动画

html - 如何使用 CSS 在锚标签上添加动画

问题描述

<div class="btnContainer">
  <a class="homeBtn">
    Go Home
  </a>
  <mat-icon aria-hidden="false" class="rightArrow">arrow_right_alt</mat-icon>
</div>

我有这个按钮代码。基本上在悬停btnContainer时，我希望图标显示为带有向右箭头的小动画。

这是我的样式表：


.btnContainer{
    background: #fb8ab0;
    border: none;
    padding: 1rem 2rem;
    text-decoration: none;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    word-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: ease-out .5s;
    justify-content: center;
}

.homeBtn{
    color: white;
    text-decoration: none;
}

.rightArrow{
    display: none;
    margin-left: -1rem;
    transition: ease-out .5s;
}

.btnContainer:hover .rightArrow{
    display: block;
    transition: ease-out .5s;
    margin-left: 0;
}

标签： htmlcssangular-material

解决方案

display从 CSS 中删除。请改用不透明度。并添加transition: all ease-out 0.5s;

.btnContainer {
  background: #fb8ab0;
  border: none;
  padding: 1rem 2rem;
  text-decoration: none;
  color: white;
  font-weight: 500;
  letter-spacing: 1px;
  word-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: ease-out .5s;
  justify-content: center;
}

.homeBtn {
  color: white;
  text-decoration: none;
}

.rightArrow {
  opacity: 0;
  margin-left: -1rem;
  transition: all ease-out .5s;
}

.btnContainer:hover .rightArrow {
  opacity: 1;
  transition: all ease-out .5s;
  margin-left: 0;
}
<div class="btnContainer">
  <a class="homeBtn">
    Go Home
  </a>
  <mat-icon aria-hidden="false" class="rightArrow">arrow_right_alt</mat-icon>
</div>

推荐阅读