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

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

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

Войти через TM ID
Похожие вопросы
TekLabs Санкт-Петербург
от 175 000 руб.
VAMDODOMA.RU Кострома
от 70 000 до 100 000 руб.
18 июля 2018, в 23:01
5000 руб./за проект
18 июля 2018, в 22:20
4000 руб./за проект