Возможность сменить иконку шрифта круто с переходом
Нет, у меня нет кода для демонстрации, но я задавался вопросом: можно ли изменить логотип с отличным шрифтом с помощью простого перехода? Например: Изменить класс? Я провел небольшое исследование w3schools, и Как создать эффект перехода в иконке font awesome также нашел эту ссылку, но они не особо помогли, и этот вопрос был у меня в течение долгого времени. Итак, вопрос: можно ли изменить логотип (отличный шрифт) с помощью css-перехода или мне для этого нужен javascript? на случай, если вопрос не стоит здесь размещать. пожалуйста, скажите мне, где это должно быть, чтобы я мог его переместить.
Ваше здоровье,
В первой строке первого ответа на вопрос, который вы связали, написано «Переходы Fontawesome могут быть выполнены так же, как и любой другой переход CSS».. с последующим примером. Что еще тебе нужно?
Привет, если вы хотите анимировать форму, чтобы переходить от одного значка к другому, я рекомендую вам искать SVG: css-tricks.com/video-screencasts/135-three-ways-animate-svg
Но я не говорю об удивительном изменении цвета шрифта и т.д. Я имею в виду, если это то, что я только что спросил, почему человек выше сказал, что мне нужен javascript? Кстати, мне нравится, когда нет голосов против :) Всегда приятно видеть, как люди открыты для вопросов новичков
Я не понял, что вы действительно хотели изменить форма значка. Это может быть потому, что я плохо читал, но также может быть потому, что вы не добавляли никаких попыток или конкретного описания того, какой переход вы хотели бы иметь. В любом случае, может быть, вам стоит взглянуть на Новый фреймворк SVG + Javascript от Fontawesome, который может это поддержать. Вы не можете просто анимировать формы шрифтов, но у вас будет гораздо больше контроля над формами svg, как @ Dexter0015 также предлагает выше.
вопрос: можно ли изменить логотип (отличный шрифт) с помощью css-перехода или мне для этого нужен javascript? <- Мусор в моем посте, но да, возможно, я мог бы быть более конкретным.
Ответы 2
Ну вот:
Это было сделано здесь: 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 мин. Спасибо за помощь :) признателен
да, это довольно просто после того, как вы увидите решение, но я тоже был сбит с толку, что привело меня к этой публикации.
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>
```
Для этого вам понадобится javascript