不，我沒有代碼來演示，但我一直在想:有沒有可能改變一個字體很棒的標志只是過渡？如:換班？我在w3schools上做了一點研究，如何在字體中創建過渡效果，awesome icon也找到了這個鏈接，但它們并沒有真正幫助我，這個問題已經困擾我很長時間了。 所以，問題是:有沒有可能用css transition做一個logo的改變(字體牛逼)或者我需要javascript來做？ 以防問題不該貼在這里。請告訴我它應該在哪里，以便我能移動它。

干杯，

給你:

這里已經這樣做了:https://codepen.io/toaster99/pen/BpgzQR.

參見工作示例:

html,
body {
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  align-content: center;
  justify-content: center;
  background: slateblue;
  min-height: 100vh;
}

.button {
  position: relative;
  margin-bottom: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fe8989;
  border-radius: 2em;
  width: 25.25rem;
  padding: 1rem 0;
  font-size: 2.75rem;
  color: white;
  transition: all 0.3s ease;
  font-family: sans-serif;
}

.icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2.3rem 0 0;
  width: 1.25rem;
  height: 2.6rem;
}

.icons i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.icon-default {
  transition: opacity 0.3s, transform 0.3s;
}

.icon-hover {
  transition: opacity 0.3s, transform 0.3s;
  transform: scale(0.5);
  opacity: 0;
}

.button:hover .icon-hover {
  transform: scale(1);
  opacity: 1;
}

.button:hover .icon-default {
  transform: scale(0.5);
  opacity: 0;
}

<link  rel="stylesheet"/>

<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 class="button">
    <div class="icons">
      <i class="fa fa-windows icon-default"></i>
      <i class="fa fa-thumbs-up icon-hover"></i>
    </div>
    Request
  </div>
</div>

是的，在你看到解決方案后，這很簡單，但我也很困惑，這讓我寫了這篇文章。

鋼性鑄鐵

@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;

    } ```

超文本標記語言

<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>
    ```