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

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);
    }