Как сделать мигающий текст на CSS

Здравствуйте, друзья, читатели и гости блога. Сегодня у меня небольшой субботний пост как с помощью CSS сделать эффект мигающего теста. Можно использовать его в качестве приветствия, установив код в гаджет HTML/JavaScript. Или просто оформить таким образом какой-нибудь фрагмент текста сообщения.


Всё достаточно просто. И сразу, чтобы не ходить вокруг да около посмотрите на сам эффект.

приветствую вас дорогие мои друзья

Код.

<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>

<a class="rainbow" >здесь ваш текст</a>

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

1.Эффекты для текста CSS.
2.Несколько вариантов красивого оформления текста.

Сегодня у меня всё. Хороших всем выходных. До встречи. Спасибо, что заглядываете в мои шпаргалки.

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

Введите Ваш email