html - 轮廓 1px 纯红色不工作比例悬停

Question

我有一个这样的PSD。

我想创建像https://www.khaneyeax.com/en/这样的网站，当我将鼠标放在链接上时，链接上会出现一个圆圈。我使用引导程序 4.5。

CSS

ul.navbar-nav > li > a {
    padding: 60px 0 16px;
    text-align: center;
    position: relative;
    min-width: 110px;
}

ul.navbar-nav > li > a > i {
    position: absolute;
    top: 10px;
    padding-top: 10px;
    left: 0;
    font-size: 25px;
    right: 0;
}

ul.navbar-nav > li {
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
}

ul.navbar-nav > li:before {
    content: '';
    position: absolute;
    height: 1px;
    width: 1px;
    border-radius: 50%;
    outline: solid 1px red;
    transition: all 0.3s linear;
    left: 0;
    right: 0;
    top: 35px;
    margin: auto;
    display: inline-block;
}

ul.navbar-nav > li:hover:before {
    transform: scale(30);
    outline-width: 1px;
}

一个简单的 HTML HTML

<li class="nav-item active">
    <a class="nav-link" href="#">
        <i class="fas fa-th-large fa-2x"></i>
        <span>Home</span>
    </a>
</li>

我看到了这个演示。

标签： htmlcssbootstrap-4

Answer 1

您可以在按钮上添加一个悬停伪类，并为悬停上的图标添加一个边框以及border-radius50% 的边框，这将在图标周围添加圆圈。在我的示例中，我为 ICON 使用 span 标签和图像：ul li a:hover span:first-of-type--> 当我们将鼠标悬停在 a 标签上时，我们会影响span:first-of-type我示例中的 ICON。它需要对你的 CSS 进行一些调整，但希望你能看到如何使用 CSS psuedo hover 来完成。

编辑：至于动画，将@keyframesCSS 中的规则添加到伪元素。在我的示例中，我添加了两个持续时间相同的动画。一个用于a标签background-color，另一个用于使用“不透明度”设置color的伪元素。:after因为这是假的:after，所以它允许原始图像图标显示出来，而不受动画中不透明度设置的影响。

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100px;
  border-radius: 10px 10px 0 0;
}

ul li a:hover {
  animation: fadebg 0.8s ease-in-out;
  background-color: #800080;
  color: #FFF;
}

@keyframes fadebg {
  from {
    color: #000;
    background-color: #FFF;
  }
  to {
    color: #FFF;
    background-color: #800080;
  }
}

ul li a span:last-of-type {
  margin-top: 5px;
}

ul li a:hover span:first-of-type:after {
  content: '';
  animation: fadein 0.8s ease-in-out;
  width: 50px;
  height: 50px;
  position: absolute;
  border: 1.5px solid white;
  border-radius: 50%;
  align-content: center;
  left: 32px;
  padding: 2px;
  opacity: 1;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.icon {
  width: 50px;
  height: 50px;
}

li span {
  display: block;
}

li {
  list-style-type: none;
}

<ul>
  <li class="nav-item active">
    <a class="nav-link" href="#">
      <span><img class="icon" src="https://cdn2.iconfinder.com/data/icons/minimal-set-two/32/minimal-39-128.png"></span>
      <span>Home</span>
    </a>
  </li>
</ul>