Мигающие ссылки для блога.

Доброго времени суток, друзья читатели и гости блога. Отправляю сегодня шпаргалку в рубрику оформления ссылок. Сделаем эффект постоянно меняющегося цвета ссылок. Лето же, почему и не добавить ярких красок в блоге. Пусть ссылки заиграют всеми цветами радуги.

Вот как-то так. Кстати, если сейчас перейдёте по ней, то узнаете ещё как сделать

Эффект подсветки ссылок.

Код совершенно простой хоть и очень длинный. Пусть вас это не смущает. Сразу обращу ваше внимание. Если вы предполагаете часто оформлять так ссылки , то код разумнее вставлять в непосредственно в шаблон. Вкладка шаблон-изменить HTML. Найдите строку ]]></b:skin> ( читаем стили CSS в шаблоне блога) и прямо над ней установите предложенный код но без тегов <style> и  </style> ( в начале и конце кода.)

<style>{
  background-color:black;
  font:bold 50px Arial,Sans-Serif;
  padding:100px 0px;
  text-align:center;
}

a.rainbow {
  color:white;
  text-decoration:none;
  -webkit-animation:rainbow 2s linear infinite alternate;
  -moz-animation:rainbow 2s linear infinite alternate;
  -ms-animation:rainbow 2s linear infinite alternate;
  -o-animation:rainbow 2s linear infinite alternate;
  animation:rainbow 2s linear infinite alternate;
}

@-webkit-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-moz-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-ms-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-o-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
</style>

Затем нужно будет при написании сообщения перейти в режим HTML и прописать ссылку так.

<a class="rainbow" href="http://www.shpargalochki.ru/"> Красивые ссылки для блога</a>

Соответственно указывайте свой адрес страницы, куда ведёт ссылка и название.
А если иногда применять такое оформление - целиком копируйте первый код и приготовленный второй. И так же в редакторе переходите в режим HTML и оба их устанавливайте в то место, где должна быть такая радужная ссылка.

Подобным образом можно сделать мигающий текст для оформления поста.

И на этом я закончу. Спасибо вам завизит и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email