Здравствуйте уважаемые веб мастера.
Многим владельцам сайта необходим рекламный баннер своего товара или услуги, ведущий на продающую страницу своего сайта.
Заказывать дороговато, поэтому вы с моей помощью можете сделать баннер самостоятельно.
Я дам код с подробными комментариями, а вы переделаете всё под свои потребности.
Баннер реализован на чистом 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;
}
}
По комментариям Вы сможете переделать баннер под свои нужды.
Желаю творческих успехов.
А ну-ка, что там ещё интересного
Дополнительная панель для сайта
Увеличение картинки по клику
Счётчик обратного отсчёта
Слайдер на javascript
Пылающий заголовок
В раздел
