А это – самый безумный и экстравагантный пример из всех: маленькое летучее одноглазое существо! Здесь мы применим и анимацию, и переходы.
Разметка
<div class="pojoro">●</div>
Для глаза существа мы применим один элемент.
CSS
.pojoro {
background: rgba( 255, 255, 255, 1);
background: radial-gradient(ellipse at center, rgba(255,255,255,1)40%,rgba(51,51,51,1) 100%);
border-radius: 100%;
/* box-shadow: смешанный цвет, тело, ресницы */
box-shadow: 0 0 0 0.2em rgb(146,89,149),
0 0 0.1em 0.55em rgb(176,89,179),
inset 0 0.2em 0 0 rgb(136,79,139);
/* ojo (глаз) */
color: rgba( 40, 40, 40, 0.8);
line-height: 1.1em;
padding-left: 0.18em;
-webkit-font-smoothing: antialiased;
user-select: none;
/*юзабилити, расположение и переход */
cursor: pointer;
position: relative;
margin: 5em auto 0 auto;
width: 1em; height: 1em;
transform-origin: center;
transition: all 0.8s ease-in-out;
/*Разделите анимацию, чтобы лучше контролировать глаз и тело */
animation: eye 2.2s ease-in-out infinite, body 1.15s 1.8s linear infinite;
}
/* Поднимите и измените создание. */
.pojoro:hover {
transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}
/* Крылья */
.pojoro:before,
.pojoro:after {
background: rgba(0,0,0,0);
border-radius: 100%;
content: "";
/* display:none, скройте крылья */
display: none;
position: absolute;
width: 1em; height: 0.1em;
-webkit-filter: blur(1px);
transition: all 0.2s;
animation-duration: 0.2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.pojoro:before {
top: 25%; left: 1.45em;
margin-left: -1em;
transform-origin: left;
transform: rotate(-60deg);
animation-name: wings;
}
.pojoro:after {
top: 25%; left: -2.2em;
margin-left: 1em;
transform-origin: right;
transform: rotate(60deg);
animation-name: wings2;
}
.pojoro:hover:before,
.pojoro:hover:after {
background: rgba(100,100,100,0.8);
/* display:block, появляются крылья и начинается анимация */
display: block;
margin-left: 0em;
width: 2em; height: 0.3em;
}
@keyframes eye {
/* Движение глаза */
5%, 10% {
line-height: 1.2em;
padding-left: 0em;
}
15%, 20% {
line-height: 1.15em;
padding-left: 0.4em;
}
/* Движение ресниц */
25% {
box-shadow: 0 0 0 0.2em rgb(146,89,149),
0 0 0.1em 0.55em rgb(166,89,169),
inset 0 1em 0 0 rgb(136,79,139);
}
23%, 27% {
box-shadow: 0 0 0 0.2em rgb(146,89,149),
0 0 0.1em 0.55em rgb(166,89,169),
inset 0 0.2em 0 0 rgb(136,79,139);
}
}
@keyframes body {
50% {
width: 1.4em; height: 1.4em;
}
}
@keyframes wings {
50% {
transform: rotate(65deg);
}
}
@keyframes wings2 {
50% {
transform: rotate(-65deg);
}
}
При проведении мышью мы активируем анимацию крыльев, а тело начинает подниматься. И это был последний пример!
В заключение скажу, что псевдоэлементы – отличная вещь, и их сочетание с анимацией и переходами позволяет создавать забавные эффекты без применения излишнего количества разметки и изображений. Надеюсь на скорое расширение их браузерной поддержки; а до этого момента мы сможем играть с ними и получать удовольствие от интересных техник. А что вы думаете об этом?