Разное

Переливающийся текст css: Переливающийся текст на CSS

07.05.2023

Текст, переливающийся разными цветами

UsefulScript.ruСкриптыТекстовые эффектыПереливающийся текст

120

382

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

Предлагаем Вам не сложный JavaScript код, который позволит Вам сделать текст, переливающийся различными цветами.

Например, вот такой заголовок будет намного ярче и веселей обычного цветного текста:

‘) } else document.write(message) function crossref(number){ var crossobj=document.all? eval(«document.all.neonlight»+number) : document.getElementById(«neonlight»+number) return crossobj } function neon() { if (n==0) { for (m=0; m

flashingletters-1) { crossref(n-flashingletters).style.color=color2 } if (n>(flashingletters+flashingletters2)-1) { crossref(n-flashingletters-flashingletters2).style.color=base_color } if (n

Для получения точно такого же текста, переливающегося различными цветами, как и в примере, показанном выше, воспользуйтесь JavaScript кодом, приведенным ниже (просто скопируйте его на свой сайт):

JavaScript код:

<script type="text/javascript">
var message = "Текст, переливающийся разными цветами";
var base_color = "#D50000";
var style = "text-align: center; color:' + base_color + '; font-size: 34px;";
var color1 = "magenta";
var color2 = "green";
var flashspeed = 99;
var flashingletters = 2;
var flashingletters2 = 2;
var flashpause = 0;
var n = 0;
if (document. all||document.getElementById){
   document.write('<div style="'+style+'">')

   for (m=0; m<message.length; m++)
   document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
   document.write('</div>')
}
else document.write(message)

function crossref(number){
   var crossobj=document.all? eval("document.all.neonlight"+number) :
   document.getElementById("neonlight"+number)
   return crossobj
}

function neon(){
   if (n==0){
    for (m=0; m<message.length; m++)
    crossref(m).style.color=base_color
    }
   crossref(n).style.color=color1
   if (n>flashingletters-1) { crossref(n-flashingletters).style.color=color2 }
   if (n>(flashingletters+flashingletters2)-1) {

   crossref(n-flashingletters-flashingletters2).style.color=base_color }
   if (n<message.length-1) { n++ }
   else{
    n=0
    clearInterval(flashing)
    setTimeout("start_color()",flashpause)
    return
    }
}
function start_color(){
   if (document. all||document.getElementById)
   flashing=setInterval("neon()",flashspeed)
}
start_color()
</script>

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

Дата создания: 20:59:36 20.06.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений: 19589 раз(а).

JavaScriptанимированный тексткрасивый текстпереливающийся текстразноцветный текст

Закрыть

Ваше имя:

488 + 11 =

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

Ваше имя:

488 + 11 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

CSS-border с анимированным градиентом | xhtml.

ru

Здесь речь пойдёт о применении градиентной заливки для CSS-border и её анимации для перемещения цветов градиента вдоль границ блока.

Самый очевидный способ реализации рамки с градиентом — установить какой-либо тип CSS-градиента в качестве значения CSS-свойству border-image:

div {
  border: 3em solid;
  border-image: linear-gradient(to right, green, yellow) 1;
}

See this code CSS Gradient Border on x.xhtml.ru.

Выглядит хорошо. Можно ли теперь анимировать эту рамку, чтобы градиент перемещался по краю блока?

Чтобы анимировать градиентную заливку CSS-border, нужно с помощью настраиваемого свойства (CSS-переменной) добавить градиенту угол (

--angle) поворота, а для анимации изменять его значение в @keyframes.

div {
  --angle: 0deg;
  /* … */
  border-image: linear-gradient(var(--angle), green, yellow) 1;
  animation: 10s rotate linear infinite;
}
@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

Используя CSS-переменную, можно заставить браузер правильно автоматически изменять её значение от 0 до 360 градусов, вместо того, чтобы добавлять отдельные ключевые кадры для каждого увеличения на 1 градус. Чтобы это работало, нужно зарегистрировать настраиваемое свойство с помощью правила @property

.

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Поскольку @property поддерживается только в Chromium, примеры ниже будут работать только в браузерах, основанных на нём. Для браузеров, которые его не поддерживают, можно добавить отдельные ключевые кадры для каждого шага, но здесь в примерах обойдёмся без усложнений.

See this code CSS Gradient Border (Animated) on x.xhtml.ru.

Хотя эффект в этом примере уже выглядит довольно красиво, если использовать более двух цветов, будут заметны конвульсии в момент перехода градиентов через углы блока. Например, такая радужная градиентная рамка:

See this code CSS Rainbow Gradient Border (Animated, Attempt 1) on x.xhtml.ru.

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

Чтобы исправить это и сделать движение плавным, сперва можно подумать об использовании радиального градиента, но на самом деле тут нужен конический градиент:

Таким образом, теперь каждый цвет градиента будет аккуратно и плавно переходить в рамку, а это приведёт к правильной плавной анимации.

div {
  /* … */
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
}

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

See this code CSS Rainbow Gradient Border (Animated) on x.xhtml.ru.

Если выключить заливку фона, то можно увидеть, что border-image растягивает каждый цвет градиента перпендикулярно своему краю, вместо обозначенного для градиента конуса.

С помощью различных типов CSS-градиента, как отмечено выше, можно получить разные эффекты при перемещении цвета по границе контейнера.

Animating a CSS Gradient Border.

Радужный текстовый генератор | HTML Создание многоцветных текстовых слов

Как создать радужный текст онлайн. вот инструмент для создания радужного текста HTML

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

Максимально допустимое количество символов: 1000. Существует два типа раскрашивания текста: один для окрашивания каждой буквы, а другой — для окрашивания только слов.

Демо: