Как сделать рекламный баннер

Здравствуйте уважаемые веб мастера.

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

Заказывать дороговато, поэтому если кому-то подойдут баннеры расположенные вверху этой страницы, то вот код одного из них — Пыльца сосны, с подробными комментариями.

Баннер реализован на чистом CSS, без картинок, без сторонних библиотек и может быть вставлен в любом месте страницы без дополнительных подключений.

HTML

<div class="cor"><a class="sylka-b" href="https://sekretymastera.ru/nowosti/pyiltsa-sosnyi/" target="_blank">
 <div class="pyl">Пыльца</div>
	<div class="sosna">сосны</div>
		<div class="p-sex">Полноценный секс в любом возрасте</div>
		<div class="hronik">Нет хронической усталости</div>
		<div class="stop">Стоп старость/<div>
		<div class="cup">КУПИТЬ!!!</div>
</a></div>

CSS

.cor {
	width: 45%;	/* Ширина блока */
	height: 55px;	/* Высота блока */
	min-width: 270px;	/* Минимальная ширина для мобил */
	padding left: 10px;
	position: relative;		/* Позиционирование на странице */
	top: 125px;
	left: 20px;
	background: #F3F9FE; 	/* Фон блока */
	border: 1px solid #93989D;
}
/* Слово Пыльца */
.pyl {
	font-size: 28px;	/* Размер шрифта */
	font-family: Impact;	
	color: #A6733C;		/* Цвет шрифта */
	letter-spacing: 0px;	/* Расстояние между буквами */
	position: absolute; 	/* Позиционирование в блоке */
	top: 5px;
	left: 10px;
}
/* Слово сосны */
.sosna {
	font-size: 20px;
	float: left;
	font-family: Impact;
	color: #5FB622;
	position: absolute;
	letter-spacing: 1.5px;
	top: 28px;
	left: 20px;
}
/* Сменяющийся текст в блоке */
.p-sex,
.hronik,
.stop {
	position: absolute;
	top: 12px;
	font-size: 21px;
	font-family: Arial;
	letter-spacing: 1px;	
}
.p-sex {
	animation: one-im 9s ease alternate infinite; /* Анимация появления текста */
	left: 22%;
}
.hronik {
	animation: two-im 9s ease alternate infinite;
	left: 30%;
}
.stop {
	animation: three-im 9s ease alternate infinite;
	left: 35%;
}
/* Ссылка ведущая на продающую страницу */
.sylka-b {
	text-decoration: none;
	color: #44AAE2;
}
/* Слово Купить */
.cup{
	position: absolute;
	left: 20%;
	top: 8px;
	width: 75%;
	color: red;
	background: #F3F9FE;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	font-style: italic;
	text-transform: uppercase;	/* Все символы прописные */
	animation: pocupka 15s linear infinite;		/* Анимация появления с подскоком */
}
@keyframes one-im{
	0% {
	opacity: 1;
	}
	30% {
	opacity: 1;
	}
	40% {
	opacity: 0;
	}
	100% {
	opacity: 0;
	}
}
@keyframes two-im{
	0% {
	opacity: 0;
	}
	30% {
	opacity: 0;
	40% {
	opacity: 1;
	}
	}
	60% {
	opacity: 1;
	}
	70% {
	opacity: 1;
	}
	80% {
	opacity: 0;
	}
	100% {
	opacity: 0;
	}
}
@keyframes three-im{
	0% {
	opacity: 0;
	}
	50% {
	opacity: 0;
	}
	70% {
	opacity: 0;
	}
	80% {
	opacity: 1;
	}
	100% {
	opacity: 1;
	}
}
@keyframes pocupka{
  0% {
	opacity: 0;
  }
  35% {
	opacity: 0;
  	transform: translateY(-12px);
  }
  36% {
	opacity: 0.2;
	transform: translateY(0);
  }
  37% {
	opacity: 0.3;
	transform: translateY(-8px);
  }
  38% {
	opacity: 0.5;
	transform: translateY(0);
  }
  39% {
	opacity: 0.7;
	transform: translateY(-5px);
  }
  40% {
	opacity: 0.9;
	transform: translateY(0);
  }
  50%{
	opacity: 1;
  }
  57% {
	opacity: 1;
  }
  58% {
	opacity: 0;
  }
  100% {
	opacity: 0;
  }
  }

По комментариям Вы сможете переделать баннер под свои нужды.

Желаю творческих успехов.

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *