
Эффект подсветки ссылок.
Код совершенно простой хоть и очень длинный. Пусть вас это не смущает. Сразу обращу ваше внимание. Если вы предполагаете часто оформлять так ссылки , то код разумнее вставлять в непосредственно в шаблон. Вкладка шаблон-изменить 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>
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 и оба их устанавливайте в то место, где должна быть такая радужная ссылка.
Подобным образом можно сделать мигающий текст для оформления поста.
И на этом я закончу. Спасибо вам завизит и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Привет, Вика! Прикольный эффект :) Обязательно воспользуюсь этой шпаргалкой в одной из моих статей.
ОтветитьУдалитьСпасибо
Привет, Игорь. Спасибо тебе и очень приятно слышать. что пригодится. Покажешь потом?
УдалитьПривет! Отличный вариант, если надо привлечь особенное внимание. Конечно, каждую ссылку не стоит оформлять, у меня до сих пор в глазах мигает.)
ОтветитьУдалитьПривет, да упаси боже каждую так оформить.
Удалитьздоровски. не помню, но у кого-то такие ссылки вроде бы видел.
ОтветитьУдалитьДа, Семён,встречаются такие при оформлении.
Удалить