Прикольные эффекты для авы

 

Представляю вам два интересных эффекта для изображений. Будем их к аватарке применять.


Этот эффект лучше поставить для отдельной больной картинки. Возьмем рецепт Каина doranych.mypage.ru/css-dlja-mypage/pachka_receptov_1.html самое последнее — визитка.

Только в свободный блок мы не просто кидаем картинку, а пишем html (см. подсказки). 

<ul id=«big_ava»><img src=«адрес картинки» /></ul>

В css пишем следующее

#big_ava {

    -webkit-mask: url(http://ruseller.com/lessons/les1633/demo/images/mask.png no-repeat center center;}

#big_ava:hover{

-webkit-animation: loop_frames 1s ease-in-out infinite; 

-webkit-animation-direction:alternate;

-webkit-mask-size: auto 100%; 

@-webkit-keyframes loop_frames { 

0% { -webkit-mask-size: auto 100%; } 

100% { -webkit-mask-size: auto 70%; } 

А прямо сейчас можете попробовать мерцающий блеск

#vcard .avatar, #vcard .avatar img {

    -webkit-transition: -webkit-mask-position 0.5s ease;

    -webkit-mask-size: 400px 300px;

    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));

    -webkit-mask-position-x: 400px;

}

#vcard .avatar, #vcard .avatar img:hover {

     -webkit-mask-position-x: 0;

}

Удачи


 

Обсудить у себя 1
Комментарии (3)

Были бы еще наглядные примеры, Юль, было бы еще лучше)

с наглядным примером только 2 могу у whatnot стоит

а первый… надо диз с ним сделать

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

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