Возможность поменять шрифт на классную иконку с переходом - PullRequest
Новая
       5

Возможность поменять шрифт на классную иконку с переходом

0 голосов
/ 29 мая 2018

Нет, у меня нет кода для демонстрации, но я удивляюсь: возможно ли изменить потрясающий шрифт логотип просто переходом?Такие как: Изменить класс?Я провел небольшое исследование в w3schools и Как создать эффект перехода в шрифте awesome icon также нашел эту ссылку, но они не очень помогли, и этот вопрос был со мной в течение долгого времени.Итак, вопрос: можно ли изменить логотип (шрифт потрясающий) с переходом CSS или мне нужен javascript для него?в случае, если вопрос не должен быть размещен здесь.пожалуйста, скажите мне, где это должно, чтобы я мог переместить его.

Ура,

Ответы [ 2 ]

0 голосов
/ 28 июля 2019

да, это довольно просто после того, как вы видите решение, но я тоже был сбит с толку, что привело меня к этому посту.

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>
    ```
0 голосов
/ 29 мая 2018

Вот, пожалуйста:

Это было сделано здесь: 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;
        }
    }
}
...