Loading...
Графика/Дизайн | Нужна помощь в CSS
И так ребята кто подскажет как сделать такой логотип как на bigl.ua при наведении курсора так крутился и менялось лого
Просто сделай при наведении смену изображения
a:hover
________
посл. ред. 27.12.2017 в 22:35; всего 1 раз(а); by JJJ
JJJ (27.12.2017 в 22:34)
Просто сделай при наведении смену изображения
a:hover

Там три изображени и первое прокручеваеться на 180градусов
ic[ON] ,
Исходники:

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
Онлайн: 1
Время:
Gen. 0.0858
(c) Bym.Guru 2010-2026