@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
  • Вопрос задан
  • 223 просмотра
Пригласить эксперта
Ответы на вопрос 1
@ospan01 Автор вопроса
почему-то пропал html

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

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Legalbet Саратов
от 100 000 руб.
Peter Partner Санкт-Петербург
от 80 000 руб.
22 окт. 2019, в 08:46
150000 руб./за проект
22 окт. 2019, в 08:40
10000 руб./за проект