可以通過轉換來更改字體真棒圖標

Question

不，我沒有代碼要演示，但是我一直在想：是否可以僅通過轉換來更改字體超棒的徽標？ 如：換班？ 我對w3schools進行了一些研究，“ 如何在字體真棒圖標中創建過渡效果”也找到了此鏈接，但是它們並沒有真正幫助，並且這個問題已經存在了很長時間。 因此，問題是：是否可以通過CSS轉換來更改徽標（真棒），還是需要JavaScript？ 如果問題不應該在這里發布。 請告訴我應該在哪里，以便我可以將其移動。

干杯，

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

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