Question

不，我没有代码可以展示，但我一直在想：是否可以通过转换更改字体真棒徽标？如：改变班级？我对w3schools进行了一些研究，How can create transition effect in font awesome icon发现了这个链接，但是他们没有真正帮助，这个问题已经和我在一起很长时间了。所以，问题是：是否可以通过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

 Response<String> response = await DioUtils.getInstance().get(JSON_API);
 List responseJson = json.decode(response.data);
 return responseJson.map((m) => new User.fromJson(m)).toList();

HTML

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

    } ```

可以通过转换更改字体真棒图标

2 个答案: