可以通过过渡更改字体真棒图标答案

【问题标题】：Possibility to change a font awesome icon with transition可以通过过渡更改字体真棒图标
【发布时间】：2018-05-29 10:27:06
【问题描述】：

不，我没有要演示的代码，但我一直在想：是否可以仅通过过渡来更改字体很棒的徽标？如：换班？我对 w3schools 做了一些研究，How can create transition effect in font awesome icon 也发现了这个链接，但他们并没有真正帮助，这个问题已经困扰了我很长时间。所以，问题是：是否可以使用 css 转换来更改徽标（字体真棒），或者我需要 javascript 吗？以防问题不应该在这里发布。请告诉我它应该放在哪里，以便我可以移动它。

干杯，

【问题讨论】：

你需要一个 javascript
您链接的问题的第一个答案的第一行说“Fontawesome 转换可以像任何其他 CSS 转换一样完成。”。接下来是一个例子。你还需要什么？
你好，如果你想要实现的是动画形状在一个图标到另一个图标之间变化，我建议你寻找 SVG：css-tricks.com/video-screencasts/135-three-ways-animate-svg
但我不是在谈论字体真棒的颜色变化等。我的意思是字体真棒标志本身完全改变了。我的意思是，如果这就是我刚刚问的，你上面的人怎么会说我需要 javascript？顺便说一句，我喜欢不受欢迎的投票 :) 总是很高兴看到人们对一些新手问题持开放态度
我不知道你真的想改变图标的 shape。那可能是因为我没有读好，也可能是因为你没有添加任何尝试，或者关于你想要什么样的过渡的具体描述。无论如何，也许你可以看看Fontawesome's brand new SVG+Javascript framework，它有可能支持这一点。您不仅可以为字体形状设置动画，还可以更好地控制 svg 形状，正如@Dexter0015 上面所建议的那样......

标签： html css font-awesome

【解决方案1】：

给你：

这里已经完成了：https://codepen.io/toaster99/pen/BpgzQR

HTML：

<div id="container">
  <div class="button">
          <div class="icons">
            <i class="fa fa-apple icon-default"></i>
            <i class="fa fa-arrow-circle-down icon-hover"></i>
          </div>
          Download
  </div>
</div>

CSS：

#attribution {
  position: fixed;
  right: 10px;
  bottom: 10px;
  color: #FE8989;
  z-index: 100;
  font-weight: bold;
  cursor: pointer;

    a {
    color: inherit;
    text-decoration: inherit;
      }
}


#container {
  background: linear-gradient(#8affff,#80eded);
  position: relative;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.button {
    position: relative;

  margin-bottom: 40px;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    background: #FE8989;
        box-shadow:  0px 0px 0 0px rgba(0,0,0,0);
    border-radius: 50px;

    width: 25.25rem;
    padding: 1rem 0;

    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 2.75rem;
    color: white;

    cursor: pointer;

    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    .icons {
        position: relative;

        display: flex;
        justify-content: center;
        align-items: center;

        margin: 0 2.3rem 0 0;
        width: 1.25rem;
        height: 2.6rem;

        i {
            position: absolute;
            top: 0;
            left: 0;

            display: block;
        }
        .icon-default {
            transition: opacity .3s, transform .3s;
        }

        .icon-hover {
            transition: opacity .3s, transform .3s;
            transform: rotate(-180deg) scale(.5);
            opacity: 0;
        }
    }

    &:hover {
        transform: scale(1.2);
        box-shadow:  20px 15px rgba(0,0,0,0.15);
        .icon-hover {
            transform: rotate(0deg) scale(1);
            opacity: 1;
        }
        .icon-default {
            transform: rotate(180deg) scale(.5);
            opacity: 0;
        }
    }
}

【讨论】：

是的，您使用代码完成了这项工作，哈哈。我可以在 4 分钟内接受你的回答。谢谢你的帮助:) 感激不尽

【解决方案2】：

是的，在您看到解决方案后它非常简单，但我也很困惑，这导致我写了这篇文章。

css

    @keyframes pulse {
      0% {
        color:transparent;

      }
      50% {
        color: #065803;

      }
      75% {
        color:rgb(113, 139, 0);

      }
      100% {
        color: #065803;

      }
      0% {
        color:rgb(189, 176, 1);

      }
    }

    #linked{
      font-size: 16.5rem;
      color: white;
      display: flex;
      justify-content: center;

    }
    i{
      animation: pulse 8s infinite ease;

    } ```

HTML

                       <i id="linked" class="fab fa-linkedin"></i>
                      </a>
                    </div>                               
                    <div class="col-2-of-2">
                      <a href="projects.html" target="_blank">
                        <i id="linked" class="fas fa-code"></i>
                      </a>
    ```

【讨论】：