Готовые анимированные градиентные тексты
На блоге уже есть статьи о красивом тексте, в том числе анимированном:
В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги h1 class можно менять на свои, например h2, 3, 4 или strong. Можно менять шрифт, его размер, толщину. Все коды найдены на сайте https://codepen.io.
Вариант 1
Автор Rloria7
Код:
<h1 class="gradient">Градиентный текст</h1><style>.gradient {font-family: Poppins, sans-serif;font-size: 8rem;font-weight: bold;text-align: center;color: #ff0003;background-image: -webkit-linear-gradient(84deg, #FF0003, #FF8F3C);-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: hue 5s infinite linear;}@-webkit-keyframes hue {from {-webkit-filter: hue-rotate(0deg);}to {-webkit-filter: hue-rotate(-240deg);}}</style>
Вариант 2
Автор Zeeshan Mukhtar
Градиент довольно динамично переходит по буквам из одного цвета в другой.
Код:
<div class="txt">Градиентный текст</div><style>.txt {display: grid;place-items: center;position: absolute;top: 50%;left: 50%;text-transform: uppercase;transform: translate(-50%, -50%);background: linear-gradient(-45deg, #6355a4, red, #e89a3e, aqua);background-size: 300%;font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;font-weight: 900;font-size: 5vw;letter-spacing: px;word-spacing: 10px;-webkit-background-clip: text;background-clip: text;color: transparent;/* -webkit-text-fill-color: transparent;/ */animation: zee 1s linear infinite;}@keyframes zee {0% {background-position: 0px 50%;}50% {background-position: 100% 50%;}100% {background-position: 0px 50%;}}</style>
Вариант 3
Автор Patrick Freedom Mayer
Градиент очень медленно и незаметно меняет свои цвета.
Код:
<div class="gradient-text">Градиентный текст</div><style>@keyframes gradient {0% { background-position: 0% 0; }50% { background-position: 100% 0; }100% { background-position: 0% 0; }}.gradient-text {animation: gradient 20s linear infinite;background: linear-gradient(70deg, rgba(255,38,163,1) 0%, rgba(0,73,176,1) 16%, rgba(238,130,178,1) 33%, rgba(0,194,229,1) 50%, rgba(238,130,178,1) 66%, rgba(0,73,176,1) 83%, rgba(255,38,163,1) 100%);background-size: 200% 100%;background-clip: text;color: transparent;font-family: Arial;font-size: 60px;font-weight: 800;letter-spacing: -4px;line-height: 1.2;padding: 10px;}</style>
Вариант 4
Автор Alex Araújo
Градиент плавно меняется снизу вверх.
Код:
<div><h1 class="text">Efeito Gradiente</h1></div><style>div{display:flex;height: 30vh;justify-content:center;align-items:center;}.text{font-family:Helvetica Neue, Helvetica, Arial, sans-serif;padding:30px;font-size:80px;font-weight:100;letter-spacing:2px;color:#f35626;background-image: -webkit-linear-gradient(92deg, #6e26f3, #feab3a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation: hue 2s infinite linear;}@-webkit-keyframes hue{from{-webkit-filter:hue-rotate(0deg);}to{-webkit-filter:hue-rotate(-360deg);}}</style>
Вариант 5
Автор: Ritika Agrawal
Градиент плавно перетекает снизу вверх, сверху вниз.
Код:
<h1>Gradient Text</h1><style>h1 {text-transform: uppercase;font-size: 72px;font-family: Verdana, Geneva, Tahoma, sans-serif;background: linear-gradient(180deg,#fd004c,#fe9000,#fff020,#3edf4b,#3363ff,#b102b7,#fd004c);background-size: 200% 200%;color: transparent;background-clip: text;-webkit-background-clip: text;animation: change 5s ease-in-out infinite;}@keyframes change {0% {background-position: 0 0;}50% {background-position: 0 100%;}100% {background-position: 0 0;}}@media(max-width:576px){h1{font-size:32px;}}</style>
Вариант 6
Автор JR
Градиент движется из угла в другой укол текста с небольшим ускорением. Создаётся впечатление, что буквы слегка приподнимаются.
Код:
<h1 class='trippytext'>Градиентный текст<br>Пример</h1><style>.trippytext {font-family: "Open Sans", Helvetica, Arial, sans-serif;font-weight: 900;letter-spacing: .02em;font-size: 7em;line-height:1em;text-shadow: 10px 10px 8px rgba(0, 0, 0, 0.15);background: linear-gradient(45deg, #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d, #58c8e8, #a8cb2d, #f1b007, #f1b007, #cb502d, #f1b007, #a8cb2d, #58c8e8);background-size:250% 500%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-webkit-animation: textAnim 5s ease-out infinite;-webkit-transform: translate3d(0,0,0);-webkit-backface-visibility: hidden;}@-webkit-keyframes textAnim {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}</style>
Вариант 7
Автор Coding Tanu
Текст подходит для тёмного фона. На белом фоне эффект смотрится не так ярко. Градиент с мерцанием бежит по буквам.
Код:
<div class="container"><div class="wrapper"><span class="text"> Анимированный градиент</span><span class="gradient"></span><span class="dodge"></span></div></div><style>.container{height: 800px;display: flex;align-items: center;justify-content: center;}.wrapper{display: inline-flex;filter: brightness(200%);overflow: hidden;}.text{color: #ffffff;font-size: 70px;font-weight: bold;font-family:'Dancing Script',cursive;text-transform: capitalize;background: #000000;background-size: 100%;padding: 30px;}.text::before{content: "Анимированный градиент";position: absolute;mix-blend-mode: difference;filter: blur(1px);}.gradient{background: linear-gradient(90deg,rgb(235, 34, 70) 20.25%,rgb(218, 7, 49) 20.25%,rgb(70, 1, 104) 80.25%);position: absolute;top: 0;left: 0;width: 100%;height: 100%;mix-blend-mode: soft-light;}.dodge{background: radial-gradient(circle,white, black 45%) center / 15% 15%;position: absolute;top: -100%;left: -100%;right: 0%;bottom: 0%;mix-blend-mode: color-dodge;animation: light 3s linear infinite;}@keyframes light{to{transform: translate(50%,50%);}}</style>
Комментарии со спамом удаляются.