Question

我有一些静态字体很棒的图标，当用户将鼠标悬停在图标上时，我希望它们每个都具有一些不错的效果，即旋转一点并弹出。最简单的方法是什么？

它们当前如下所示：

我当前的图标

 <div class="it-icons">
                  <a target="_blank" href="https://www.linkedin.com/in/craig-whelan-515704196/">
                    <i class="fab fa-linkedin-in"></i>
                  </a>
                  <a target="_blank" href="https://github.com/craig1990">
                    <i class="fab fa-github"></i>
                  </a>
                  <a target="_blank" href="https://stackoverflow.com/users/12231949/darego101">
                    <i class="fab fa-stack-overflow"></i>
                  </a>
                </div>

CSS：

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
}

Answer 1

.it-icons a {
  display: inline-block;
  height: 3.5rem;
  width: 3.5rem;
  background-color: #4582EC;
  color: #fff !important;
  border-radius: 100%;
  text-align: center;
  font-size: 1.5rem;
  line-height: 3.5rem;
  margin-right: 1rem;
  transform: scale(1);
  transition: all ease .3s;
}
.it-icons a:hover{
  transform: scale(1.15) rotate(25deg);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="it-icons">
              <a target="_blank" href="https://www.linkedin.com/in/craig-whelan-515704196/">
                <i class="fab fa-linkedin-in"></i>
              </a>
              <a target="_blank" href="https://github.com/craig1990">
                <i class="fab fa-github"></i>
              </a>
              <a target="_blank" href="https://stackoverflow.com/users/12231949/darego101">
                <i class="fab fa-stack-overflow"></i>
              </a>
            </div>

Answer 2

您可以尝试做这样的事情，它很简单并且不太浮华。我认为该网站上不应有任何复杂的动画，或者如果有的话，应将其保持在最低水平。希望对您有帮助。

     .it-icons a {
        display: inline-block;
        height: 3.5rem;
        width: 3.5rem;
        background-color: #4582EC;
        color: #fff !important;
        border-radius: 100%;
        text-align: center;
        font-size: 1.5rem;
        line-height: 3.5rem;
        margin-right: 1rem;
        transition: transform 0.5s ease-in-out;
        transition: 1s;
    }

    .it-icons a:hover {
        transform: rotate(360deg);
        background-color: rgb(7, 63, 161);
    }

更改字体真棒图标旋转并在悬停时缩放

2 个答案: