Графика/Дизайн | Нужна помощь в CSS
И так ребята кто подскажет как сделать такой логотип как на bigl.ua при наведении курсора так крутился и менялось лого
Просто сделай при наведении смену изображения
a:hover
________
посл. ред. 27.12.2017 в 22:35; всего 1 раз(а); by JJJ
a:hover
________
посл. ред. 27.12.2017 в 22:35; всего 1 раз(а); by JJJ
JJJ (27.12.2017 в 22:34)
Просто сделай при наведении смену изображения
a:hover
Просто сделай при наведении смену изображения
a:hover
Там три изображени и первое прокручеваеться на 180градусов
ic[ON] ,
Исходники:
________
посл. ред. 27.12.2017 в 22:46; всего 1 раз(а); by Cyber_Shot
Исходники:
html:
class="bgl-decoration-logo__letters"
src="https://static-cache.ua.uaprom.net/bigl/images/logo/letters.svg?r=43cc21af580eb324d6f4843acf5383b1"
alt=""
>
<img
class="bgl-decoration-logo__paw"
src="https://static-cache.ua.uaprom.net/bigl/images/logo/paw.svg?r=afcdb38e26964eb8b5ca427c15091fa4"
alt=""
>
<img
class="bgl-decoration-logo__body"
src="https://static-cache.ua.uaprom.net/bigl/images/decoration/logo_snow/body.svg?r=cc554fef0a0554e40398593b795ea7a8"
alt=""
width="24"
>
<img
class="bgl-decoration-logo__tail"
src="https://static-cache.ua.uaprom.net/bigl/images/decoration/logo_snow/tail.svg?r=5ab2f754cbeb15fe3bd506589f79e652"
alt=""
width="100%"
>
</div>
<img
class="bgl-header__logo"
data-qaid="logo-img"
src="https://static-cache.ua.uaprom.net/bigl/images/logo.png?r=0b7b925f3dc923d88daffc9c4f81b815"
srcset="https://static-cache.ua.uaprom.net/bigl/images/logo2x.png?r=6f800c16bfaf7a2a4de44692444d56b4 2x"
width="46"
height="42"
alt="Потребительские товары от проверенных интернет магазинов на Bigl.ua"
title="Маркетплейс проверенных продавцов Bigl.ua"
itemprop="logo"
>
</div>
css:
.bgl-header__logo-container {
-ms-flex-preferred-size: 70px;
flex-basis: 70px;
}
.bgl-decoration-logo {
position: absolute;
width: 46px;
height: 42px;
background-color: #fff;
}
.bgl-decoration-logo__letters {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
a, area, img {
outline: none;
}
.bgl-decoration-logo__paw {
position: absolute;
top: 11px;
left: 1px;
width: 100%;
-ms-transform: rotate(0deg) scale(.72);
transform: rotate(0deg) scale(.72);
transition: all .5s ease-in-out;
transition-delay: 0s;
transition-delay: .2s;
}
.bgl-decoration-logo__body {
position: absolute;
top: 29px;
left: 24px;
-ms-transform: translate(-50%,-50
rotate(0deg) scale(0);
transform: translate(-50%,-50
rotate(0deg) scale(0);
transition: all .5s ease-in-out;
transition-delay: 0s;
transition-delay: 0s;
}
.bgl-decoration-logo__tail {
position: absolute;
top: 28px;
left: 0;
width: 100%;
opacity: 0;
}
.bgl-header__logo {
vertical-align: middle;
}
________
посл. ред. 27.12.2017 в 22:46; всего 1 раз(а); by Cyber_Shot