Не пропусти
Главная » WordPress » Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

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

Содержание:

  1. CSS анимация при наведении
  2. Эффект анимации текста
  3. Примеры использования CSS анимации текста
  4. Как сделать CSS анимацию у кнопки
  5. CSS эффект анимации ссылок
  6. Как сделать анимацию CSS у картинки
  7. Как сделать анимацию фона на сайте с помощью CSS
  8. Заключительная часть

CSS анимация при наведении

Я думаю, что все согласятся с утверждением, что чем сайт интерактивнее и динамичнее, тем на нем дольше остаются пользователя. Это безусловный факт и спорить здесь просто нет смысла. Сейчас мы разберем примеры CSS анимации при наведении мыши. И разбор мы начнем со свойства CSS – transition.

Если говорить в общих чертах, то transition – это переходное свойство, которое может принимать до 4 разных связанных свойств:

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Все эти свойства позволяют элементам менять свои значения в пределах определенного времени duration. Т.е мы навели элемент у него начинают появляться свойства, которые мы задали в селекторе (в нашем случае это

.element

 ). Чуть ниже пример кода перехода фона у контейнера div с псевдоклассом

:hover

  из красного цвета в зеленый:

div {
  transition: background-color 0.5s ease;
  background-color: red;
}
div:hover {
  background-color: green;
}

При наведении мыши CSS анимация появляется не сразу, а с небольшой задержкой в доли секунды. Это вы можете увидеть уже на этом примере:

Вы также можете задавать как определенное свойство, как мы сделали с вами выше, т.е задали правило «меняй фон у элемента div в течение 0.4 сек с красного на зеленый» или же использовать значение all, чтобы обратиться ко всему свойству целиком.

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

В примере выше, у свойств background и padding произойдет эффект перехода transition. Вы можете также через запятую указывать определенный набор значений, например как в этом сниппете кода:

div {
  transition: background 0.2s ease, padding 0.8s linear;
}

Как видите, наша запись уже сократилась и мы все сделали в одну строчку.

По большему счету не важно, в каком порядке указаны значения, только если мы имеем дело со свойством delay. Тут уже нам нужно указывать продолжительность по времени как долго будет происходить та самая задержка.

Также некоторые свойства не могут быть переходными, т.е быть с эффектом transition, потому как не являются анимированными.

Указав в стилях transition элемента мы можем им управлять как в одну сторону, так и в другую, т.е мы навели на элемент и произошло изменение значения цвета, отвели курсор мыши и все возвращается обратно к исходному. Простой пример ниже все поясняет:

У вас может возникнуть вопрос, почему css анимация при наведении происходит, а в обратном случае нет?

Это зависит от того, что у элемента с классом .box в нашем примере эффект происходит только в одну сторону у псевдоэлемента

.box:hover

 .

Для совместимости со всеми типами современных браузеров у классов элементов добавляют следующие свойства:

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

Вместо

background-color

  вставляете нужное значение цвета и смотрите результат в браузере.

Еще один пример использования css анимации при наведении представлен ниже. Структура следующая. Имеем конструкцию html кода:



new!

CSS стили используем следующие:

body {padding:4em; background:#fcfcfc;}

.wrap {width:200px; margin:auto;  z-index:1;}

.msg {
  color: whitesmoke;
  text-align:center;
  font-family: 'Bree Serif', Courier, monospaced;
  font-size:3.5em;
  width:200px;
  position:absolute;
  margin:55px 0 0 2px;
  pointer-events: none;
}

.sticker {
  width:200px;
  height:200px;
  position:absolute;
  background: url(https://dl.dropbox.com/u/1143870/i/sticker.png) top center no-repeat;
  animation: spin 10s linear infinite;
  /*Set our animation play state to paused initially */
  animation-play-state: paused;
}

.sticker:hover {
  /* Toggle our animation play state to running when we are hovering over our sticker */
  animation-play-state: running;
}

@keyframes spin {
  100% {transform: rotate(1turn); }
}

И получаем вот такой симпатичный эффект CSS анимации.

Давайте рассмотрим другие варианты.

Эффект анимации текста

Теперь давайте перейдем к практической части, а именно создадим css эффект анимации у текста и текстовые тени. Вполне возможно вы видели заставки трейлеры к фильмам, может даже немного жутковатые, где текст словно выцветал на темном фоне. Сейчас на примере мы воссоздадим что-то похожее.

Идея состоит в том, чтобы размыть текст и сделать буквы вращающимися с пространством между ними. Это может быть достигнуто различными способами, используя новые CSS фильтры, а также анимацию отступов margin и padding. Мы же будем использовать текстовые тени и межбуквенный интервал, чтобы достичь желаемого результата. Так как нам нужно будет контролировать каждую букву при анимации текста, то мы будем использовать скрипт Lettering.js Дэйва Руперта, чтобы обернуть слова и буквы в несколько тегов span.

Каждые фразы мы обернем в тег h2.

Sometimes it's better

to hide

in order to

survive evil

Thanatos

This fall

Prepare

Refresh to replay

Помните, что это лишь эксперементальный эффект и не стоит заморачиваться и быть строгими с разметкой.

Теперь с помощью конструкции кода ниже обернем все слова в тегах h2 в теги span. Вот так:

$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();

Это создаст следующую безумную структуру:

S o m

Теперь каждая из наших букв обернута с помощью скрипта тегами span. Как видите их получилось много, но это только часть. Целиком всю CSS структуру вы увидите в файле, который я приложу. Здесь только показывается принцип его действия.

Теперь приступим к стилизации наших элементов.

Все наши заголовки будут располагаться во всю ширину экрана, т.е занимать практически все свободное место.

.os-phrases h2 {
	font-family: 'Dosis', 'Lato', sans-serif;
	font-size: 70px;
	font-weight: 200;
	height: 100%;
	width: 100%;
	overflow: hidden;
	text-transform: uppercase;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 14px;
	text-align: center;
}

Мы же хотим, чтобы наши буквы и весь текст целиком располагались по центру, правильно? Тогда нам потребуется flexbox для нашего контейнера. Вот код:

.os-phrases h2,
.os-phrases h2 > span {
	height: 100%;
	/* Centering with flexbox */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

Т.е все буквы, которые обернуты в тег span от родительского класса

.os-phrases

  будут закреплены по центру.

Теперь добавим немного свободного места между словами (межбуквенный интервал):

.os-phrases h2 > span {
	margin: 0 15px;
}

Первая «обертка» (Wrapper) будет иметь свойство perspective (т.е выходить на первый план):

.os-phrases h2 > span > span {
	display: inline-block;
	perspective: 1000px;
	transform-origin: 50% 50%;
}

Сами буквы будут прозрачными и мы запустим css анимацию текста для них в 5,2 секунды:

.os-phrases h2 > span > span > span {
	display: inline-block;
	color: hsla(0,0%,0%,0);
	transform-style: preserve-3d;
	transform: translate3d(0,0,0);
	animation: OpeningSequence 5.2s linear forwards;
}

Прежде чем приступить к анимации, давайте определим как предложения (фразы) и с какой задержкой будут появляться, какая из них будет быстрее, чем предыдущая.

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

.os-phrases h2:nth-child(2) > span > span > span {
	animation-delay: 5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
	animation-delay: 10s;
}

.os-phrases h2:nth-child(4) > span > span > span {
	animation-delay: 15s;
}

.os-phrases h2:nth-child(5) > span > span > span {
	font-size: 150px;
	animation-delay: 21s;
	animation-duration: 8s;
}

.os-phrases h2:nth-child(6) > span > span > span {
	animation-delay: 30s;
}

.os-phrases h2:nth-child(7) > span > span > span {
	animation-delay: 34s;
}

Ну и напоследок. Мы зададим один специальный эффект анимации, но сперва давайте взглянем на самый главный.

В этой анимации мы сначала придадим эффект text-shadow, чтобы буквы выглядели немного размыто. Межбуквенное расстояние будет большим и буквы будут повернуты по оси Y, и мы будем видеть только незначительную их часть. Ставим непрозрачность opacity:0.2

На половине анимации мы заострим буквы и уменьшим расстояние (интервал) до 14px, увеличим непрозрачность и повернем их на 0.

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

На последнем шаге, мы добавим исчезающие буквы и промасштабируем их, что сделает их слегка размытыми снова:

@keyframes OpeningSequence {
	0% {
		text-shadow: 0 0 50px #fff;
		letter-spacing: 80px;
		opacity: 0.2;
		transform: rotateY(-90deg);
	}
	50% {
		text-shadow: 0 0 1px #fff;
		letter-spacing: 14px;
		opacity: 0.8;
		transform: rotateY(0deg);
	}
	85% {
		text-shadow: 0 0 1px #fff;
		opacity: 0.8;
		transform: rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow: 0 0 10px #fff;
		opacity: 0;
		transform: translateZ(130px);
		pointer-events: none;
	}
}

Наша последняя фраза будет иметь другую CSS анимацию. Вот ее код:

.os-phrases h2:nth-child(8) > span > span > span {
	font-size: 30px;
	animation: FadeIn 4s linear 40s forwards;
}

@keyframes FadeIn {
	0% {
		opacity: 0;
		text-shadow: 0 0 50px #fff;
	}
	100% {
		opacity: 0.8;
		text-shadow: 0 0 1px #fff;
	}
}

Напоследок добавим акцент на конкретных словах, сделая их «жирным» начертанием:

/* Жирные слова */
.os-phrases h2:first-child .word3,
.os-phrases h2:nth-child(2) .word2,
.os-phrases h2:nth-child(4) .word2 {
	font-weight: 600;
}

Собственно это все шаги. Вот что получится в итоге, нажмите на кнопку демо или скачайте исходники.

Скачать исходники

Примеры использования CSS анимации текста

Одним лишь примером выше мы не ограничимся. Специально для вас я подготовил подборку исходников кода с удивительными анимационными текстовыми эффектами, сделанными при помощи CSS. Их здесь будет целых 15 штук. Бери не хочу.

Пример 1

Html код:

L o a d i n g

CSS:

.cssload-preloader {
font-family: Arial, Tahoma;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
display: box;
display: -o-box;
display: -ms-box;
display: -webkit-box;
display: -moz-box;
display: flex;
display: -o-flex;
display: -ms-flex;
display: -webkit-flex;
display: -moz-flex;
box-pack: center;
-o-box-pack: center;
-ms-box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
box-align: center;
-o-box-align: center;
-ms-box-align: center;
-webkit-box-align: center;
-moz-box-align: center;
align-items: center;
-o-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
perspective: 487px;
-o-perspective: 487px;
-ms-perspective: 487px;
-webkit-perspective: 487px;
-moz-perspective: 487px;
overflow: hidden;
animation: wobble 3s ease-in-out infinite;
-o-animation: wobble 3s ease-in-out infinite;
-ms-animation: wobble 3s ease-in-out infinite;
-webkit-animation: wobble 3s ease-in-out infinite;
-moz-animation: wobble 3s ease-in-out infinite;
padding-bottom: 2em;
}
.cssload-preloader > span {
font-size: 49px;
animation: 3s ease-in-out infinite;
-o-animation: 3s ease-in-out infinite;
-ms-animation: 3s ease-in-out infinite;
-webkit-animation: 3s ease-in-out infinite;
-moz-animation: 3s ease-in-out infinite;
color: transparent;
text-shadow: 0 0 0px rgb(0,0,0);
}
span:nth-child(-n+3) {
animation-delay: -1.495s;
-o-animation-delay: -1.495s;
-ms-animation-delay: -1.495s;
-webkit-animation-delay: -1.495s;
-moz-animation-delay: -1.495s;
}
span:nth-child(1),
span:nth-last-child(1) {
animation-name: blur-1;
-o-animation-name: blur-1;
-ms-animation-name: blur-1;
-webkit-animation-name: blur-1;
-moz-animation-name: blur-1;
}
span:nth-child(2),
span:nth-last-child(2) {
animation-name: blur-2;
-o-animation-name: blur-2;
-ms-animation-name: blur-2;
-webkit-animation-name: blur-2;
-moz-animation-name: blur-2;
}
span:nth-child(3),
span:nth-last-child(3) {
animation-name: blur-3;
-o-animation-name: blur-3;
-ms-animation-name: blur-3;
-webkit-animation-name: blur-3;
-moz-animation-name: blur-3;
}
@keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-o-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-ms-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-webkit-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@-moz-keyframes blur-1 {
50% {
text-shadow: 0 0 0.15em rgb(0,0,0);
}
}
@keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-o-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-ms-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-webkit-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@-moz-keyframes blur-2 {
50% {
text-shadow: 0 0 0.075em rgb(0,0,0);
}
}
@keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-o-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-ms-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-webkit-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@-moz-keyframes blur-3 {
50% {
text-shadow: 0 0 0.05em rgb(0,0,0);
}
}
@keyframes wobble {
from, to {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(45deg);
}
}
@-o-keyframes wobble {
from, to {
-o-transform: rotateY(-45deg);
}
50% {
-o-transform: rotateY(45deg);
}
}
@-ms-keyframes wobble {
from, to {
-ms-transform: rotateY(-45deg);
}
50% {
-ms-transform: rotateY(45deg);
}
}
@-webkit-keyframes wobble {
from, to {
-webkit-transform: rotateY(-45deg);
}
50% {
-webkit-transform: rotateY(45deg);
}
}
@-moz-keyframes wobble {
from, to {
-moz-transform: rotateY(-45deg);
}
50% {
-moz-transform: rotateY(45deg);
}
}

Результат:

Пример 2

HTML:

L
o
a
d
i
n
g

CSS:

#fountainTextG{
width:234px;
margin:auto;
}
.fountainTextG{
color:rgb(0,0,0);
font-family:Arial;
font-size:24px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_fountainTextG;
-o-animation-name:bounce_fountainTextG;
-ms-animation-name:bounce_fountainTextG;
-webkit-animation-name:bounce_fountainTextG;
-moz-animation-name:bounce_fountainTextG;
animation-duration:2.09s;
-o-animation-duration:2.09s;
-ms-animation-duration:2.09s;
-webkit-animation-duration:2.09s;
-moz-animation-duration:2.09s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.5);
-o-transform:scale(.5);
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
}#fountainTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#fountainTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#fountainTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#fountainTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#fountainTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#fountainTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#fountainTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
@keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:rgb(0,0,0);
}
100%{
transform:scale(.5);
color:rgb(255,255,255);
}
}
@-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-o-transform:scale(.5);
color:rgb(255,255,255);
}
}
@-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-ms-transform:scale(.5);
color:rgb(255,255,255);
}
}
@-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-webkit-transform:scale(.5);
color:rgb(255,255,255);
}
}
@-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-moz-transform:scale(.5);
color:rgb(255,255,255);
}
}

Результат:

Пример 3

HTML:

L
o
a
d
i
n
g

CSS:

#spinningTextG{
width:234px;
margin:auto;
height:29px;
}
.spinningTextG{
color:rgb(0,0,0);
font-family:Arial;
font-size:24px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_spinningTextG;
-o-animation-name:bounce_spinningTextG;
-ms-animation-name:bounce_spinningTextG;
-webkit-animation-name:bounce_spinningTextG;
-moz-animation-name:bounce_spinningTextG;
animation-duration:1.5s;
-o-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.3);
-o-transform:scale(.3);
-ms-transform:scale(.3);
-webkit-transform:scale(.3);
-moz-transform:scale(.3);
}
#spinningTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#spinningTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#spinningTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#spinningTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#spinningTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#spinningTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#spinningTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
@keyframes bounce_spinningTextG{
0%{
transform:scale(1);
color:rgb(0,0,0);
}
100%{
transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-o-keyframes bounce_spinningTextG{
0%{
-o-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-o-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-ms-keyframes bounce_spinningTextG{
0%{
-ms-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-ms-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-webkit-keyframes bounce_spinningTextG{
0%{
-webkit-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-moz-keyframes bounce_spinningTextG{
0%{
-moz-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-moz-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}

Выглядит вот так:

Как сделать CSS анимацию у кнопки

В этом разделе статьи хочется поговорить и на практике показать как работает CSS эффект у кнопок. Здесь все очень просто, ведь вы уже знаете как все работает. Особо останавливаться на разборе не буду. Вам достаточно всего лишь скопировать нужный вариант и вставить к себе на сайт. Итак, разберем первый пример – эффект нажатой выпуклой кнопки. В современном дизайне на многих сайтах они используются, например на сайте elama.ru

Создаем новый html документ и прописываем следующую конструкцию:







Animated Buttons - "Pressed Effect"

Результат ниже:

Разберем другой пример, где при наведении срабатывает знакомый нам эффект hover (псевдокласс) пример наведении:







Animated Button

Смотрим результат ниже:

Добавление CSS эффекта пульсации для кнопки. Она сработает, если на нее нажать. Пример кода ниже:







Animated Button - Ripple Effect

Сохраняем и смотрим, что получится в итоге:

Рассмотрим еще один эффект, когда наводишь на кнопку и она становится с тенью и словно немного выходит на первый план:







Shadow Buttons

Use the box-shadow property to add shadows to the button:

Предлагаю еще один восхитительный пример анимации кнопок ниже. Просто копируете код и вставляете полюбившийся стиль кнопок на свой сайт.

С кнопками закончили, настало время рассмотреть…

CSS эффект анимации ссылок

Да, дорогие друзья, к ним тоже можно применить Wow эффект и сайты, даже в минимализме, будут смотреться и выглядеть очень круто и дорого. Вся фишка в использовании все тех же псевдоклассов для элементов.

Предупреждение: Не все псевдоэлементы перехода (transition) одинаково хорошо работают во всех браузерах. Наиболее хорошо просматриваются в Chrome и FireFox

В большинстве примеров ниже у нас будет общий html каркас:

Но для некоторых специальных элементов нам нужно передавать data-atribute ссылке текста в псевдоэлементе:

Мы могли бы использовать span в некоторых случаях, поскольку мы хотим добавить perspective для каждого элемента или достигнуть другого эффекта.

Теперь нам необходимо добавить псевдоклассы и в них прописать свойства анимации. Примерно так:

/* 15 эффект: scale down, reveal */
.cl-effect-15 a {
color: rgba(0,0,0,0.2);
font-weight: 700;
text-shadow: none;
}
.cl-effect-15 a::before {
color: #fff;
content: attr(data-hover);
position: absolute;
transition: transform 0.3s, opacity 0.3s;
}
.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
transform: scale(0.9);
opacity: 0;
}

Вот какие получаются эффекты (смотрите ниже):

Скачать исходные файлы

Как сделать анимацию CSS у картинки

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

Демо 1

Одно изображение плавно появляется вместо другого с прозрачностью с применением эффекта у псевдокласса

:hover

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

CSS:

#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}

Итог:

Демо 2

Когда одна картинка сменяет другую с плавным эффектом при нажатии на саму эту картинку.

HTML:

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

Click me to toggle

CSS:

#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}

Небольшой скрипт, который будет запускать проверку нажата ли кнопка для смены изображений с эффектом.

$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});

Данный код нужно вставлять в подвал сайта в конструкцию


Тогда запись будет выглядеть вот так:


Получается следующее:

Демо 3

Приближение одного и удаленность другого (zoom in zoom out).

HTML:

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

CSS:

#cf4 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf4 img {
position:absolute;
left:0;
-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;
}
#cf4 img.top {
-webkit-transform:scale(0,0);
-moz-transform:scale(0,0);
-o-transform:scale(0,0);
transform:scale(0,0);
opacity:0;
}
#cf4: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;
}
#cf4: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(0,0);
transform-origin: bottom left;
}

Результат:

Демо 4

Ротация (смена изображений с эффектом).

HTML:

Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте Как сделать CSS анимацию фона, текста, картинок и кнопок на сайте

CSS:

#cf5 {
position:relative;
height:281px;
width:450px;
margin:10px auto;
}
#cf5 img {
position:absolute;
left:0;
-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;
}
#cf5 img.top {
-webkit-transform:scale(1,0);
-moz-transform:scale(1,0);
-o-transform:scale(1,0);
transform:scale(1,0);
filter: alpha(opacity=0);
opacity:0;
}
#cf5:hover img.top, #cf5.hover_effect img.top {
opacity:1;
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
-o-transform:scale(1,1);
transform:scale(1,1);
}
#cf5:hover img.bottom, #cf5.hover_effect img.bottom {
filter: alpha(opacity=0);
-webkit-transform:rotate(360deg) scale(0,0);
-moz-transform:rotate(360deg) scale(0,0);
-o-transform:rotate(360deg) scale(0,0);
transform:rotate(360deg) scale(0,0);
}

Получаем вот такую красоту:

Как сделать анимацию фона на сайте с помощью CSS

Это будет финальной частью в которой я поделюсь с вами информацией о том, как сделать стильный фон с анимацией. Все очень просто – мы продолжаем задействовать силы CSS и в примере ниже будем использовать

@keyframes

  вместо эффекта transitions. У нас как вы уже догадались будет один блог div, в котором будет использована фоновая картинка с эффектом анимации.

HTML:

CSS:

#animate-area	{
width: 560px;
height: 400px;
background-image: url('http://smarticle.ru/wp-content/uploads/2016/02/bg-clouds.png');
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}

Результат:

Также вот вам еще один пример анимации фона с градиентом. По мне так очень впечатлило:

HTML:





CSS:

body{
background-color: #000000;
padding: 0px;
margin: 0px;
}
#gradient
{
width: 100%;
height: 800px;
padding: 0px;
margin: 0px;
}

JS:

var colors = new Array(
[62,35,255],
[60,255,60],
[255,35,98],
[45,175,230],
[255,0,255],
[255,128,0]);
var step = 0;
//color table indices for:
// current color left
// next color left
// current color right
// next color right
var colorIndices = [0,1,2,3];
//transition speed
var gradientSpeed = 0.002;
function updateGradient()
{
if ( $===undefined ) return;
var c0_0 = colors[colorIndices[0]];
var c0_1 = colors[colorIndices[1]];
var c1_0 = colors[colorIndices[2]];
var c1_1 = colors[colorIndices[3]];
var istep = 1 - step;
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]);
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]);
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]);
var color1 = "rgb("+r1+","+g1+","+b1+")";
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]);
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]);
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]);
var color2 = "rgb("+r2+","+g2+","+b2+")";
$('#gradient').css({
background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"});
step += gradientSpeed;
if ( step >= 1 )
{
step %= 1;
colorIndices[0] = colorIndices[1];
colorIndices[2] = colorIndices[3];
//pick two new target color indices
//do not pick the same as the current one
colorIndices[1] = ( colorIndices[1] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
colorIndices[3] = ( colorIndices[3] + Math.floor( 1 + Math.random() * (colors.length - 1))) % colors.length;
}
}
setInterval(updateGradient,10);

А теперь смотрим, что получилось:

Заключительная часть

Здесь я хочу подытожить то, что мы с вами прошли. Мы изучили и поняли как работает, на простых примерах, CSS анимация у картинок, текста, ссылок, кнопок и фона. Теперь вам остается только внедрить понравившиеся вещи на своих сайтах. Спасибо, что дочитали этот мануал до конца. Значит я старался не зря:-) Увидимся с вами совсем скоро, следите за новыми выпусками Smarticle.ru. Всем удачи, а пока…

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*

x

Check Also

Подборка из 21 шаблона для лендинга на 2016 год

Ищите привлекательную одностраничную тему? У многих успешных вебсайтов одностраничная тема  WordPress, которая обеспечивает пользователям достаточный уровень интерактивного опыта, так что другие страницы попросту не нужны. В этой статье я расскажу о 21 шаблоне для лендинга на ...

Рейтинг@Mail.ru