Пример псевдо-элементов анимации и переходов

Этот урок скорее для общего развития, потому что здесь присутствует много недостатков. Но это только начало, так что дадим шинс. Мне показалось интересным.

Анимация существо летающий глаз.

 


HTML

<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);
    }
}

Источник: http://tympanus.net/ (там есть еще примеры)


 

Обсудить у себя 3
Комментарии (0)
Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: