Анимация для картинок в блоге (3 варианта)

Доброго времени суток, друзья. Сегодня про эффекты для изображений в блоге. Давно это тему не затрагивала и предлагаю вам 3 интересных варианта анимации картинок на странице. Использовать будем исключительно коды CSS, которые и будут приводить в движение изображения. Конкретно, благодаря параметру transform, примеры которые были приведены в этом сообщении.

Трансформация преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.

Вообще их можно применить к любому блоку - кнопка, баннер или другой элемент. 

Все эффекты вы можете наглядно посмотреть здесь в редакторе. Скопируйте каждый из кодов и установите в поле редактора.

1. Эффект смены картинки. При наведении на происходит плавная смена одного изображения на другое. 

<style>
  #v-b {
    position:relative;
    height:250px;
    width:250px;
    margin:0 auto;
  }
  #v-b img {
    position:absolute;
    left:0;width:240px;height:240px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #v-b img.top {
    -webkit-transform:scale(3,0);
    -moz-transform:scale(3,0);
    -o-transform:scale(3,0);
    transform:scale(3,0);
    opacity:0;

  }

  #v-b:hover img.top, #cf4.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
  }
  #v-b:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(1,0);
    transform-origin: bottom left;
  }</style>

   
<div class="hover" id="v-b">
<img class="bottom shadow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSr4DFFYlY4nYXSM6RvYcPv61E2jxWiHZMp8UfZ2sZVqmy4psuFk5kgFtHXgYDgMBjH-e4CzxvCUUFM1XY0UX78gk8hrrK_jDaksx0Y6Ww1xskwaSoZ6UlOyBcWEN3eq3tEFq9LAzwGvg/s1600/%25D0%25BA%25D0%25BE%25D1%2588%25D0%25BA%25D0%25B0.jpg%20" />
    <img class="top shadow" imageanchor="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwoouertRGKcqFQEmpWMHuHh-Qw_lyphGFDHgohMLYE9eCBXYcP6jHY0QIqAfjdBb-nYBk8Z_6tWnfU5btjtfLF0dUB86XasEZBxDtNvbXZKcoaNtywxp_d_FQmu7A_v7b_fOlF2ce3u0/s1600/%25D0%25BC%25D1%258B%25D1%2588%25D0%25BA%25D0%25B0.jpg" </div>

Цветом я отметила адреса картинок ( подбирайте ваши) розовым цветом первое изображение и голубым второе. 

2. Эффект вращение картинки. 

<style>
@-webkit-keyframes spinner {
    from {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
}


@keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotatex(0deg);
    }
    to {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);
    }
.stage {
    margin: 1em auto;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px;
}

} #spinner {
    width: 200px;
    height: 200px;
    background: #ffb6c1 url('http://www.skazki-online.ru/skazki/slysatskazki200.jpg') no-repeat;
    text-align: center;
    color:#dc143c;
    margin:0 auto;


    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;

    animation-name: spinner; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration: 6s; /* длительность анимации */

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d; 
}

#spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused; /* останавливаем анимацию */
}

</style>

<br />
<div id="stage">
<div id="spinner">
Привет, привет?!</div>
</div>

Зелёным адрес картинки и какой - то заголовок. Можно убрать если нет необходимости.

3. Дрожащая картинка.

 

<div class="wibro"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCwVD9DJH5uaa7ShRUzFyjMj1iPs-e7flln_A3aBLU7q-tZSPxj-BvnaJtvgcCeKmWyIOzWszttbyolTskETHIdigN-xrarg1cc5Mz7jxtw8GP_-NhOuvO1RNY6y4N3m9CYgacyLg7N9s/s1600/%25D0%25B7%25D0%25B0%25D0%25B9%25D1%2587%25D0%25B8%25D0%25BA_DoV+%25287%2529.png" </div><style>.wibro{    display: block;    position: relative;    width: 18px;>    height: 41px;    background: url(tel.png) no-repeat 0 0;    }.wibro:hover {    -webkit-animation: 0.1s tremor ease-out infinite;      animation: 0.1s tremor ease-out infinite;    }@-webkit-keyframes tremor {    0%, 25% {        left: -1px;        top:-1px;        -webkit-transform: translateX(-4%);        transform: translateX(-4%);    }    50%, 100% {        left: 1px;        top: 1px;        -webkit-transform: translateX(4%);        transform: translateX(4%);    }}@-moz-keyframes tremor {    0%, 25% {        left: -1px;        -webkit-transform: translateX(-4%);    50%, 100% {        left: 1px;        -webkit-transform: translateX(4%);        transform: translateX(4%);    }}@-ms-keyframes tremor {    0%, 25% {        left: -1px;    }    50%, 100% {        left: 1px;        -webkit-transform: translateX(4%);        transform: translateX(4%);    }}@-o-keyframes tremor {    0%, 25% {        left: -1px;        -webkit-transform: translateX(-4%);        transform: translateX(-4%);<    }    50%, 100% {        left: 1px;        -webkit-transform: translateX(4%);        transform: translateX(4%);    }}@keyframes tremor {    0%, 25% {        left: -1px;        -webkit-transform: translateX(-4%);        transform: translateX(-4%);    }    50%, 100% {        left: 1px;        -webkit-transform: translateX(4%);        transform: translateX(4%);    }</style>

Код каждого из предложенных вариантов устанавливаем в сообщении блога, перейдя в формат HTML, или в гаджет HTML/JavaScript.

Можно нескольким элементам присвоить один класс div и задать им нужный эффект.

Спасибо всем за внимание и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email