@ospan01

Почему иконки отображаются не во всех браузерах?

решил анимировать иконки, нашел пример в интернете, скопировал
в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично
но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge, скорее всего и в Explorer отображается так же

HTML





CSS

.gradient-icon{
display:inline-block;
position:relative;
overflow:hidden;
}

html, body{
padding:0;
margin:0;
height:100%;
width:100%;
}

svg .cls-1{
fill:none;
stroke-width:1px;
stroke: #000;
mix-blend-mode:multiply;
}

svg{
color:#000;
position:relative;
opacity:.9;
width:100%;
height:100%;
display:block;
transition:transform .3s ease;
}

.icons-after{
position: absolute;
width:150%;
height:150%;
top:-25%;
left:-25%;
mix-blend-mode: screen;
pointer-events:none;
animation: spin 1.5s linear infinite alternate;
}

.icon-gradient-one .icons-after{
background: linear-gradient(55deg, #0951a0 0%,#8cdfff 100%,#30cbff 45%);
}

svg:hover{
transform: scale(.95);
}

@-webkit-keyframes spin {
from {
transform: rotate(0deg);

}
to {
transform: rotate(360deg);
}
}
Safari
5a54e91140d6e640378653.png
Chrome Mac
5a54e923592e8251833754.png
Chrome Windows
5a54e92d137e8529348900.png
Edge
5a54e9343c948289337080.png
  • Вопрос задан
  • 148 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ospan01 Автор вопроса
почему-то пропал html

вот пример кода для второй иконки
5a54e9f8e9e20524765103.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Webit Москва
До 90 000 руб.
труби.ру Казань
от 50 000 до 90 000 руб.