- PVSM.RU - https://www.pvsm.ru -
Одним прекрасным вечером увидел одну забавную картинку с подобными зверюшками и решил вдохнуть в них жизнь. Решил я это сделать ради научного эксперимента: выявить, действительно ли эти нововведения можно претворять в жизни.
Более 65% пользователей [1] уже могут увидеть transitions в действии.
Демо [2] Код на jsfiddle [3]
Так как я люблю CSS, решил сделать интерактивных зверюшек на чистом CSS, без каких-либо скриптов.
Благодаря псевдоклассу :checked, можно реализовать действие по клику, что обычно приписывается на js. А также используя уже привычные псевдоклассы :hover и :active, я оживил зверюшек:
.pavepy .body .hand.left,
.pavepy:hover .body .hand.right,
input:checked + .pavepy .body .hand.right,
input:checked + .pavepy:hover .body .hand.left,
input:checked + .pavepy.fox .head .ear.right {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Disclaimer. Некоторые свойства я намеренно упустил, дабы не было слишком много кода.
Несмотря на внушительную уже поддержку браузерами этого свойства без преффикса, я решил использовать полную запись со всеми преффиксами:
.pavepy .head > .nose {
width: 30px;
height: 15px;
top: 55px;
border-bottom: 2px solid rgba(255,255,255,.5);
border-radius: 50%;
margin: 0 auto;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.pavepy:hover .head > .nose,
input:checked + .pavepy .head > .nose {
border-bottom: 6px solid rgba(255,255,255,.5);
}
Пусть это и нос, но они улыбаются. Меняем толщину нижнего бордюра при 50%-ном радиусе. Получается весьма забавный эффект.
Расмотрим пример с движением «ручек» наших зверюшек.
При наведении мыши, ручки должны подниматься на 30 градусов относительно линии горизонта. Так как ручки первоначально опущены (примечательно, также на 30 градусов), то плодить лишнего кода не нужно, и мы просто объединяем свойства поворота для левой руки и правой руки при наведении, и правой руки и левой руки при наведении:
.pavepy .body .hand.left,
.pavepy:hover .body .hand.right {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
У лисички аналогично поворачиваются ушки. Там также выбран поворот на 30 градусов, так что к коду, представленному выше, добавляются еще несколько строк для ушек.
.pavepy .head > .ear {
width: 50px;
height: 50px;
border-radius: 50%;
/* Подобная связка обеспечивает нам идеальный круг */
}
.pavepy.fox .head > .ear {
top: -10px;
width: 80px; /* Делаем из круг эллипс, так как ширина уха заявлена чуть выше, мы ее не переопределяем */
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* Делаем сплюснутый эллипс для ушек лисички */
.pavepy.fox .head > .ear.left {border-radius: 0 100%; left: -25px;} /* Удобно использовать двойные классы для правых и левых элементов */
.pavepy.fox .head > .ear.right {border-radius: 100% 0; right: -25px;}
Взяв самый обычный input с type='checked', мы можем использовать псевдокласс :checked
При клике, я решил, чтобы зверюшки подпрыгивали вверх и замирали там. Для этого, используя transitions, я менял высоту ножек, отступ снизу для зверюшки.
Чтобы зверюшка не замирала при наведении мыши, когда она находится в состоянии :checked, было решено еще немножечко поднимать ручки: на 45 градусов.
Чтобы на клик зверюшки реагировали везде, input был сделан прозрачным, и на всю ширину и высоту:
.wrapper > ul li input {
display: block;
opacity: 0;
position: absolute;
width: 100%;
height: 100%; /* задав размеры родительскому контенту можно оперировать процентами */
left: 0;
top: 0;
}
Свойства opacity, delay в transitions и никакой магии. Есть два блока text и text1:
.pavepy .body .text {
margin: 0px auto; /* Центрируем */
padding-top: 35px;
position: relative; /* не absolute, так как с последним не работает центрирование margin: 0 auto*/
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.506);
width: 80px;
z-index: 10; /* Таким образом этот текст находится поверх второго */
-webkit-transition: all 0.5s 0.3s;
-moz-transition: all 0.5s 0.3s;
-ms-transition: all 0.5s 0.3s;
-o-transition: all 0.5s 0.3s;
transition: all 0.5s 0.3s;
}
.pavepy:hover .body .text {
opacity: 0; /* При наведении мыши скрываем, чтобы второй блок смог появиться */
}
.pavepy .body .text2 {
margin: -18px auto; /* смещаем, чтобы строки совместились */
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.506);
width: 80px;
z-index: 5; /* Таким образом, этот текст не накладывается на предыдущий при уведении курсора*/
opacity: 0; /* По-умолчанию прозрачен */
-webkit-transition: all 0.5s 1.0s;
-moz-transition: all 0.5s 1.0s;
-ms-transition: all 0.5s 1.0s;
-o-transition: all 0.5s 1.0s;
transition: all 0.5s 1.0s; /* delay в 1 секунду прекрасно выполняет свою функцию */
}
.pavepy:hover .body .text2 {
opacity: 1;
}
Я не стал проводить долгие часы в установке разных версий браузеров, но все равно нашел несколько курьезов:
P.S.: Для свойств opacity, box-shadow, border-radius, text-shadow я не прописывал префиксы, так как беспрефиксовые вариации уже давно были введены. Transitions без префиксов хоть и добавлены у Firefox, Opera и Internet Explorer 10, но совсем недавно.
P.S. 2: В планах научить их издавать звуки, моргать и привести в более приятный и уникальный вид.
Автор: Carduelis
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/20399
Ссылки в тексте:
[1] Более 65% пользователей: http://css3.bradshawenterprises.com/
[2] Демо: http://goldfinch.pro/pavepies.html
[3] Код на jsfiddle: http://jsfiddle.net/JpKfJ/
[4] Источник: http://habrahabr.ru/post/159161/
Нажмите здесь для печати.