{"id":1496,"date":"2024-06-08T16:45:27","date_gmt":"2024-06-08T16:45:27","guid":{"rendered":"https:\/\/raymundopizano.com\/blog\/?p=1496"},"modified":"2024-06-13T21:06:07","modified_gmt":"2024-06-13T21:06:07","slug":"crear-efecto-de-texto-animado-con-css","status":"publish","type":"post","link":"https:\/\/raymundopizano.com\/blog\/html-y-css\/crear-efecto-de-texto-animado-con-css\/","title":{"rendered":"Crear efecto de texto de color animado con CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Para crear un efecto de texto de color animado utilizaremos un fondo degradado y por medio de las animaciones lo moveremos de posici\u00f3n lo que creara un efecto muy genial., he aqu\u00ed el c\u00f3digo:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#F8F8F2;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#272822\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;es&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot; \/&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; \/&gt;\n    &lt;title&gt;Code House - Let\u2019s Code! by Raymundo Pizano&lt;\/title&gt;\n    &lt;style&gt;\n      body {\n        display: grid;\n        place-content: center;\n        height: 100vh;\n        background: #212121;\n      }\n      .container {\n        width: 770px;\n        height: 100px;\n        text-align: center;\n      }\n      h1 {\n        font-size: 50px;\n      }\n      .txtanim {\n        background-image: linear-gradient( 179.7deg,  rgba(249,21,215,1) 1.1%, rgb(42, 9, 160) 99% );\n        background-clip: text;\n        color: transparent;\n        animation: txtanim 15s linear infinite;\n        background-size: 200% 200%;\n      }\n\n      @keyframes txtanim {\n        0% {\n          background-position: 0% 0%;\n        }\n\n        50% {\n          background-position: 100% 100%;\n        }\n\n        100% {\n          background-position: 0% 0%;\n        }\n      }\n    &lt;\/style&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div class=&quot;container&quot;&gt;\n      &lt;h1 class=&quot;txtanim&quot;&gt;Let\u2019s Code! by Raymundo Pizano&lt;\/h1&gt;\n    &lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n\" style=\"color:#F8F8F2;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki monokai\" style=\"background-color: #272822\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F8F8F2\">&lt;!<\/span><span style=\"color: #F92672\">DOCTYPE<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">lang<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;es&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">charset<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;UTF-8&quot;<\/span><span style=\"color: #F8F8F2\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">meta<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">name<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;viewport&quot;<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">content<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;width=device-width, initial-scale=1.0&quot;<\/span><span style=\"color: #F8F8F2\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;Code House - Let\u2019s Code! by Raymundo Pizano&lt;\/<\/span><span style=\"color: #F92672\">title<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">style<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">display<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">grid<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">place-content<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">vh<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">background<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">#212121<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #A6E22E\">.container<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">width<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">770<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">height<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">text-align<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">center<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">font-size<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">50<\/span><span style=\"color: #F92672\">px<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #A6E22E\">.txtanim<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">background-image<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">linear-gradient<\/span><span style=\"color: #F8F8F2\">( <\/span><span style=\"color: #AE81FF\">179.7<\/span><span style=\"color: #F92672\">deg<\/span><span style=\"color: #F8F8F2\">,  <\/span><span style=\"color: #66D9EF\">rgba<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">249<\/span><span style=\"color: #F8F8F2\">,<\/span><span style=\"color: #AE81FF\">21<\/span><span style=\"color: #F8F8F2\">,<\/span><span style=\"color: #AE81FF\">215<\/span><span style=\"color: #F8F8F2\">,<\/span><span style=\"color: #AE81FF\">1<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #AE81FF\">1.1<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #66D9EF\">rgb<\/span><span style=\"color: #F8F8F2\">(<\/span><span style=\"color: #AE81FF\">42<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">9<\/span><span style=\"color: #F8F8F2\">, <\/span><span style=\"color: #AE81FF\">160<\/span><span style=\"color: #F8F8F2\">) <\/span><span style=\"color: #AE81FF\">99<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">background-clip<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">text<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">color<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #66D9EF\">transparent<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">animation<\/span><span style=\"color: #F8F8F2\">: txtanim <\/span><span style=\"color: #AE81FF\">15<\/span><span style=\"color: #F92672\">s<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">linear<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #66D9EF\">infinite<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        <\/span><span style=\"color: #66D9EF; font-style: italic\">background-size<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">200<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">200<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      <\/span><span style=\"color: #F92672\">@keyframes<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #FD971F; font-style: italic\">txtanim<\/span><span style=\"color: #F8F8F2\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        0% {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #66D9EF; font-style: italic\">background-position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        50% {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #66D9EF; font-style: italic\">background-position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">100<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        100% {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">          <\/span><span style=\"color: #66D9EF; font-style: italic\">background-position<\/span><span style=\"color: #F8F8F2\">: <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #AE81FF\">0<\/span><span style=\"color: #F92672\">%<\/span><span style=\"color: #F8F8F2\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">style<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;\/<\/span><span style=\"color: #F92672\">head<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;container&quot;<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">      &lt;<\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\"> <\/span><span style=\"color: #A6E22E\">class<\/span><span style=\"color: #F8F8F2\">=<\/span><span style=\"color: #E6DB74\">&quot;txtanim&quot;<\/span><span style=\"color: #F8F8F2\">&gt;Let\u2019s Code! by Raymundo Pizano&lt;\/<\/span><span style=\"color: #F92672\">h1<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">    &lt;\/<\/span><span style=\"color: #F92672\">div<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">  &lt;\/<\/span><span style=\"color: #F92672\">body<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F8F8F2\">&lt;\/<\/span><span style=\"color: #F92672\">html<\/span><span style=\"color: #F8F8F2\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Y as\u00ed se vera:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwmZrBr\" src=\"\/\/codepen.io\/anon\/embed\/RwmZrBr?height=450&amp;theme-id=1&amp;slug-hash=RwmZrBr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwmZrBr\" title=\"CodePen Embed RwmZrBr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Para crear un efecto de texto de color animado utilizaremos un fondo degradado y por medio de las animaciones lo moveremos de posici\u00f3n lo que creara un efecto muy genial., he aqu\u00ed el c\u00f3digo: Y as\u00ed se vera:<\/p>\n","protected":false},"author":1,"featured_media":1511,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-1496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-y-css"],"_links":{"self":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/1496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/comments?post=1496"}],"version-history":[{"count":6,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/1496\/revisions"}],"predecessor-version":[{"id":1510,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/posts\/1496\/revisions\/1510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/media\/1511"}],"wp:attachment":[{"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/media?parent=1496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/categories?post=1496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raymundopizano.com\/blog\/wp-json\/wp\/v2\/tags?post=1496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}