• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать ссылку заметной для сайта на CSS (Создать мигающий ссылку всеми цветами и переливом на CSS)
Сделать ссылку заметной для сайта на CSS
Kosten
Дата: Воскресенье, 2019-03-24, 16:45 | Сообщение 1
Администраторы
Сообщений:20795
Награды: 56


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

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



Приступаем:

HTML

Код
<a href="http://zornet.ru/">Ссылка, что мигает</a>

CSS

Код
a {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  font-size: 19px;
  position: relative;
  padding-bottom: 6px;
}
a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
      background: #cc0b0b;
  animation: link linear 0.1s infinite alternate;
}
@keyframes link {
  100% {background: #0f0fde;}
}


Демонстрация
Прикрепления: 1828786.png(19.3 Kb)
Страна: (RU)
First
Дата: Воскресенье, 2019-03-24, 21:39 | Сообщение 2
Гл. Модератор
Сообщений:807
Награды: 4


Лучше под класс прописать, а то так замигают все ссылки и будет хаос на сайте 27a
Страна: (GB)
Kosten
Дата: Воскресенье, 2019-03-24, 22:53 | Сообщение 3
Администраторы
Сообщений:20795
Награды: 56


Цитата First ()
Лучше под класс прописать, а то так замигают все ссылки и будет хаос на сайте

Здесь когда все сохранил, то аналогично подумал, что на все ссылки будет распространено, но можно и под класс выставить, чтоб ключевое слово, которое прописано, как гирлянда сияла.

HTML

Код
<a class="detagsopa_nuakives" href="http://zornet.ru/">Ключевая фраза</a>

CSS

Код
.detagsopa_nuakives {
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
  font-size: 19px;
  position: relative;
  padding-bottom: 6px;
}
.detagsopa_nuakives:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: red;
  animation: link linear 0.1s infinite alternate;
}
@keyframes link {
  100% {background: blue}
}


Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать ссылку заметной для сайта на CSS (Создать мигающий ссылку всеми цветами и переливом на CSS)
  • Страница 1 из 1
  • 1
Поиск: