Доброго времени суток, друзья. Сегодня про эффекты для изображений в блоге. Давно это тему не затрагивала и предлагаю вам 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://3.bp.blogspot.com/-r_4EkrgCtnE/WANq8DdUSuI/AAAAAAAAFU4/pUYLnU1YdAojjgqBUlCz5gKEQuNJTcrCQCLcB/s1600/%25D0%25BA%25D0%25BE%25D1%2588%25D0%25BA%25D0%25B0.jpg%20" />
<img class="top shadow" imageanchor="1" src="https://3.bp.blogspot.com/-CpZ44KkP80Q/WANrImyw2XI/AAAAAAAAFU8/zlXt0e2PRespuWQt6oV1qwxjrDHiFvMyACLcB/s1600/%25D0%25BC%25D1%258B%25D1%2588%25D0%25BA%25D0%25B0.jpg" </div>
#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://3.bp.blogspot.com/-r_4EkrgCtnE/WANq8DdUSuI/AAAAAAAAFU4/pUYLnU1YdAojjgqBUlCz5gKEQuNJTcrCQCLcB/s1600/%25D0%25BA%25D0%25BE%25D1%2588%25D0%25BA%25D0%25B0.jpg%20" />
<img class="top shadow" imageanchor="1" src="https://3.bp.blogspot.com/-CpZ44KkP80Q/WANrImyw2XI/AAAAAAAAFU8/zlXt0e2PRespuWQt6oV1qwxjrDHiFvMyACLcB/s1600/%25D0%25BC%25D1%258B%25D1%2588%25D0%25BA%25D0%25B0.jpg" </div>
Цветом я отметила адреса картинок ( подбирайте ваши) розовым цветом первое изображение и голубым второе.
2. Эффект вращение картинки.
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>
@-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://4.bp.blogspot.com/-eG_PNR7IJY0/WqS0lg2h02I/AAAAAAAAJbE/82C104_2w7sB2eNtdibFRzMX2LGXcKtmACLcBGAs/s1600/%25D0%25B7%25D0%25B0%25D0%25B9%25D1%2587%25D0%25B8%25D0%25BA_DoV%2B%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 и задать им нужный эффект.
Спасибо всем за внимание и до встречи.
здесь можно оформить подписку на новые шпаргалки
