На блоге уже есть статьи о красивом тексте, в том числе анимированном:
В сегодняшнем сообщении покажу новые интересные градиентные анимированные стили оформления текста. Все их можно посмотреть в живую в редакторе. Вставляете код и нажимаете кнопку "Показать результат". Текст можно использовать для названия сайта, заголовков, поздравлений и объявлений. Теги 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
![градиент градиент](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsm1Mi9z2bnO59Vgjb3acRl6I-6R6ZseJ33nGUv-0F2BYjPCJ8ykr_xRr4uCOmmYwVoha-goGvCF0lpzper32ZrUNB5SBdPNYyvpufpTmo7Djehq8vDQtxGtmLBXkVJZnd03ECgMqu-U4O6aXqb-WOPekeBLxQPzNt2meMud3f3FQNjRLYlTlICoZukdGY/w320-h61-rw/FoToD263.jpg)
Градиент довольно динамично переходит по буквам из одного цвета в другой.
Код:
<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
![Вариант 3 Вариант 3](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCbSYCO_sbVQmg0rlIiXLybbso9V3c6m0v82d_Ct3d6OTURlnCvd9nmhoOB1zNdD7ihwyZmycrlsz9n2DJCIsIDfkKPXEEf_HpZcBds7heZFeyQ3iq86CmwE-Su7CMT7MLxxoWzxfDbtzMQPMrkSlY8NgN1WLzgbvKsmrgZ3QcN1mZjSFKxBYiwhxKetOe/w320-h73-rw/FoTo4264.jpg)
Градиент очень медленно и незаметно меняет свои цвета.
Код:
<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
![Вариант 4 Вариант 4](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxFqz6xdj4mRgt9VUw2sqv52587WSs9fktMh-z01eExuVGUxLzI9y8UYagyxRTTZxdi31j3_j6dImyIneCxyfNGN9HLeJto22_tYPwSt0axvjGEdqrfL-BqPX0_lITy85-Z6Gx_b1H1HnyzotpLvDDUbvXM_VJse_bsEZQqeqEIESYzz2iTC4jykPuxtt/w320-h58-rw/FoTot265.jpg)
Градиент плавно меняется снизу вверх.
Код:
<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
![вариант 5 вариант 5](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKmd0lKO88QSdSZGwqxNcR0CDllHbzjiHsI_-beulrZ_cwyDzMRndFHXzCwoKaMjNKlRsN_3Ko_h-sKktOgUlcrdk0rNx9F5AsmASF0GE40hKw9ox7vddTDQNovAxK35HmUT0CyPL_ggbWV1nt0Pmto9Ij-b_xfLelDOa3PVh5w4_19F9ansQB_IGHoClK/w320-h36-rw/FoToK266.jpg)
Градиент плавно перетекает снизу вверх, сверху вниз.
Код:
<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
![Вариант 6 Вариант 6](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NVtGZQC0CQDtYl1fKFpgdUW5rgaBThGbPJ6zX7zHO3AffQdLf1jVA13Ntr11OJfvNr6pKaATWbBUtS_KzRdmU7TwK5Ftr1PDh3gvutc5WDoSTvJM0lFrckHqLRy0gaa6FSNG-SkQbC9XiE2V_kwlfOcn4v0ZtduDEKmfFeWkJ9wWc1P0BIs5WM6gLh0r/w320-h117-rw/FoToM267.jpg)
Градиент движется из угла в другой укол текста с небольшим ускорением. Создаётся впечатление, что буквы слегка приподнимаются.
Код:
<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
![белый фон белый фон](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbrvx_twTMJPgDyuidyHeR3u0xshxes1rrjEEO2DFaVe7MAE4QPOF2oXygkKCJfMzaVtWEIbU7I3YOyuErttIHoxT9mXntJXxhF2LirhdmfwfRGQ6960QQe2jXTVsYKE9ubK7tMpMiY-f0xBQ0nXfv4fwZJm2RfaJQVLqN3RD3Lyx75dswtZ1XCLsMc_x4/w320-h44-rw/FoToK274.png)
![чёрный фон чёрный фон](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxwRII2Xh-Pq7ptfTan_ptH3Od9Dtu1L9oeqaU0k4XtxbYyHRCGfma-o03w5pY9vLven599V7UdMw9DXg7kjp4aaLYA1o0r-gjQfKvdHUoc-mLm_SvGrp6f_CNgVlDsmVs4J-eaMrbyBTTR6jCKZ6IViLuhFdNu8mH1BPFHDR4AcpzwkF1vNqMF3n4Tk5t/w320-h45-rw/FoTor275.png)
Текст подходит для тёмного фона. На белом фоне эффект смотрится не так ярко. Градиент с мерцанием бежит по буквам.
Код:
<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>
Комментарии со спамом удаляются.