SCRIPTED - Text

text

Categories: Text Animations / Text Hover / Text Styles (CTRL+F or Find in Page)

Text Animations

Sample Floating <style> .text{ animation-name: floating; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 6px); } 100% { transform: translate(0, -0px); } </style> <p class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow.</p> Copied!	Sample Pop out <style> /* cr koiwaprimevera */ #text { -webkit-animation: pop 1s ease-in-out infinite alternate; animation: pop 1s ease-in-out infinite alternate; -moz-animation: pop 1s ease-in-out infinite alternate; } @keyframes pop { from { transform:scale(0.95) } 50% { transform:scale(1) } to { transform:scale(0.95) } } @-webkit-keyframes pop { from { -webkit-transform:scale(0.95) } 50% { -webkit-transform:scale(1) } to { -webkit-transform:scale(0.95) } } </style> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!
Sample Bounce <style> .bounce mark { z-index: 99; animation: bounce-anim 2s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto; background: none; } .bounce mark:nth-child(1) { animation-delay: 0s; display: inline-block; } .bounce mark:nth-child(2) { animation-delay: 0.2s; display: inline-block; } .bounce mark:nth-child(3) { animation-delay: 0.4s; display: inline-block; } .bounce mark:nth-child(4) { animation-delay: 0.6s; display: inline-block; } .bounce mark:nth-child(5) { animation-delay: 0.8s; display: inline-block; } .bounce mark:nth-child(6) { animation-delay: 1s; display: inline-block; } .bounce mark:nth-child(7) { animation-delay: 1.2s; display: inline-block; } .bounce mark:nth-child(8) { animation-delay: 1.4s; display: inline-block; } .bounce mark:nth-child(9) { animation-delay: 1.6s; display: inline-block; } .bounce mark:nth-child(10) { animation-delay: 1.8s; display: inline-block; } @keyframes bounce-anim { 0% { transform: scale(1, 1) translateY(0); } 10% { transform: scale(1.1, .9) translateY(0); } 30% { transform: scale(.9, 1.1) translateY(-30px); } 50% { transform: scale(1.05, .95) translateY(0); } 60% { transform: scale(1, 1) translateY(-4px); } 100% { transform: scale(1, 1) translateY(0); } } </style> <div class="bounce"><mark>I</mark><mark>n</mark><mark>s</mark><mark>e</mark><mark>r</mark><mark>t</mark> <mark>h</mark><mark>e</mark><mark>r</mark><mark>e</mark></div> <div style="font-size: 1.5em;"> To insert into Carrd: copy and paste all the styles into an embed, nothing outside of it. If you have pro plus, give the text you want to have bouncy letters the "lebounce" class. If you have pro standard, change ".bounce" to "#text01" or whatever the ID of your text is. To then put the code into action, highlight each individual letter using Carrd's markdown rules (==l====i====k=====e== ==t====h====i====s==). Voila. As for creds...<br> CYBERPINKED FOR THE BASE CODE. ALLISON OF MCYT.CRD.CO. Then also li'l old me, Jake @carrduser, only if you repost to your resource Carrd because I optimized it for Carrd. THANKS!!!!!!! Muchas gracias. </div> Copied!	Sample Marquee <marquee behavior="scroll" direction="right"> text </marquee> Copied!
Sample Tilt <style> #text { text-align: center; animation: tilt 1s infinite alternate; } @keyframes tilt { from { transform: rotate(5deg); } to { transform: rotate(-5deg); } } </style> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!	Sample Rolling Text <script type="text/javascript"> // <![CDATA[ var text=Array("Cupcake ", "ipsum dolor sit ", "amet oat cake "); // replace this with an array of your own text var delay=4; // seconds between each new text item var speed=80; // speed of the scroll /**************************\ Rolling Text Effect * * (c)2014+ mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var diddly=new Array(); var rolltop; var referee=0; delay=1000; if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(prepare_to_go); function prepare_to_go() { var i, r; var r=document.getElementById("rolling"); rolltop=r.clientHeight; while (r.childNodes.length) r.removeChild(r.childNodes[0]); r.style.position="relative"; r.style.overflow="hidden"; r.appendChild(document.createTextNode(String.fromCharCode(160))); for (i=0; i<text.length; i++) { diddly[i]=document.createElement("div"); diddly[i].style.position="absolute"; diddly[i].style.top=rolltop+"px"; diddly[i].style.left="0px"; if (text[i].indexOf("www")!=-1) slinkit(diddly[i], text[i]); else diddly[i].appendChild(document.createTextNode(text[i])); r.appendChild(diddly[i]); } rolling_in_the_hay(); } function rolling_in_the_hay() { var i, j; j=referee%text.length; for (i=rolltop; i>=0; i--) setTimeout("diddly["+j+"].style.top='"+i+"px'", speed(rolltop-i)); for (i=-1; i>-rolltop; i--) setTimeout("diddly["+j+"].style.top='"+i+"px'", delay-speedi); ++referee; setTimeout('rolling_in_the_hay()', delay); } function slinkit(r, t) { var a, s, e; s=t.indexOf("www"); e=t.indexOf(" ", s); if (e==-1) e=t.length; r.appendChild(document.createTextNode(t.substring(0, s))); a=document.createElement("a"); a.href="http://"+t.substring(s, e); a.appendChild(document.createTextNode(t.substring(s, e))); r.appendChild(a); r.appendChild(document.createTextNode(t.substring(e))); } // ]]> </script> <div id="rolling">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</div> Copied!
Sample Wobble <head> <link rel="stylesheet" type="text/css" href="https://assets.tumblr.com/pop/shared-af8c1d1b.css" /> </head> <div class="_k93X"> <span class="OGmZ_">S</span> <span class="OGmZ_">a</span> <span class="OGmZ_">m</span> <span class="OGmZ_">p</span> <span class="OGmZ_">l</span> <span class="OGmZ_">e</span> </div> Copied!	Sample Bubbling <script type="text/javascript"> // <![CDATA[ var bgcolour="#ffffff"; // background colour var fgcolour="#6600cc"; // foreground colour var speed=80; // speed of bubbling, lower is faster var shades=12; // number of shades of bubble /**************************** * Bubbling Text Effect * (c)2003-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var bubbcol=new Array(); var bubbshd; var bubbler, bubbtxt; var bubbchr=new Array(); function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(bubbagump); function bubbagump() { if (document.getElementById) { var i, fg, bg, col; for (bubbler=0; bubbler<=shades; bubbler++) { col="#"; for (i=1; i<6; i+=2) { bg=parseInt(bgcolour.substring(i,i+2),16); fg=parseInt(fgcolour.substring(i,i+2),16); col+=dechex(bg+(fg-bg)(bubbler/shades)); } bubbcol[bubbler+1]=col; if (bubbler==Math.floor(shades/2)) bubbshd=col; } bubbler=document.getElementById("bubble"); bubbtxt=bubbler.firstChild.nodeValue; while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]); for (i=0; i<bubbtxt.length; i++) { fg=document.createElement("span"); fg.setAttribute("id", "bubb"+i); fg.style.textShadow=bubbshd+" 0px 0px 2px"; fg.appendChild(document.createTextNode(bubbtxt.charAt(i))); bubbler.appendChild(fg); } bubbler=setInterval("bubbling()", speed); }} function dechex(dec) { dec=Math.floor(dec); return ((dec<16)?'0':'')+dec.toString(16); } function bubbling() { var i, bubby; for (i=0; i<bubbtxt.length; i++) { bubby=document.getElementById("bubb"+i); if (bubbchr[i]) { bubby.style.color=bubbcol[bubbchr[i]]; bubbchr[i]=(bubbchr[i]+1)%bubbcol.length; } else if (Math.random()<7.5/(shades*bubbtxt.length)) bubbchr[i]=1; } } // ]]> </script> <p id="bubble">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!
Vertical Marquee <style> #text { writing-mode: vertical-rl; text-orientation: downwards; white-space: nowrap; } </style> <div id="text"> <marquee behavior="scroll" direction="down"> Cupcake ipsum dolor sit amet oat cake apple pie marshmallow </marquee> </div> Copied!	Flirty Text <script type="text/javascript"> // <![CDATA[ var speed=60; // speed of flirting, lower is faster /**************************** * Flirty Texy Effect * (c)2003-6 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var flitxt; var flipos=0; var flidir=1; window.onload=function() { if (document.getElementById) { var flirty=document.getElementById("flirt"); flitxt=flirty.firstChild.nodeValue; flitxt=String.fromCharCode(160)+flitxt+String.fromCharCode(160); while (flirty.childNodes.length) flirty.removeChild(flirty.childNodes[0]); for (var i=0; i<flitxt.length; i++) { var fliri=document.createElement("span"); fliri.setAttribute("id", "flir"+i); fliri.appendChild(document.createTextNode(flitxt.charAt(i))); flirty.appendChild(fliri); } flitim=setInterval("flaunt()", speed); }} function flaunt() { flipos+=flidir; if (flipos>flitxt.length \|\| flipos<-flitxt.length) { flipos-=flidir; if (Math.random()<0.25) flidir=-flidir; if (Math.random()<0.25) flipos=-flipos; } else if (flipos==flidir && Math.random()<0.925) { flipos-=flidir; flidir=-flidir; } for (var i=0; i<flitxt.length; i++) { if (flipos+i>-1 && flipos+i<flitxt.length) { var flirme=document.getElementById("flir"+i); var flicha=flitxt.charAt(flipos+i); flirme.firstChild.nodeValue=flicha; } } } // ]]> </script> <div id="flirt">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</div> Copied!
Neon Light <script type="text/javascript"> // <![CDATA[ // all colours must be in format '#NNNNNN', not 'red' or 'rgb(7,8,9)' var fgcolour="#6600cc"; // foreground colour var hlcolour="#aa77ff"; // highlight colour var bgcolour="#ffffff"; // background colour var glcolour="#cc99ff"; // colour of glow around letters var speed=66; // speed colours change, 1 second = 1000 var delay=50; // how long to wait between wipes var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link) /**************************** Multi-Wipe Neon Text Effect (c)2003-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ***************************/ var w_txt, w_txl; var w_flp=bgcolour; var w_sty=Math.floor(Math.random()8); var w_cnt=-1; var wipes=new Array(); var wrand=new Array(); function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(fzzz); function fzzz() { if (document.getElementById) { var i, wiper, wipei; wiper=document.getElementById("wipe"); w_txt=wiper.firstChild.nodeValue; w_txl=w_txt.length; while (wiper.childNodes.length) wiper.removeChild(wiper.childNodes[0]); for (i=0; i<w_txl; i++) { wipei=document.createElement("span"); wipei.appendChild(document.createTextNode(w_txt.charAt(i))); wipes[i]=wipei.style; wipes[i].textShadow=glcolour+" 0px 0px 5px"; wipes[i].color=fgcolour; wiper.appendChild(wipei); } if (alink) { wiper.style.cursor="pointer"; wiper.onclick=function() { top.location.href=alink; } } for (i=0; i<w_txl; i++) wrand[i]=i; wiper=setInterval("randwipe()", speed); }} function c(i, shade) { if (shade==bgcolour) wipes[i].textShadow="none"; else wipes[i].textShadow=glcolour+" 0px 0px 5px"; wipes[i].color=shade; } function randwipe() { var w_old; if (w_cnt++<w_txl+2+delay(w_flp==fgcolour)) eval("wipe"+w_sty+"();"); else { w_cnt=-1; w_flp=(w_flp==fgcolour)?bgcolour:fgcolour; w_old=w_sty; while (w_old==w_sty) w_sty=Math.floor(Math.random()9); } } function dechex(dec) { return ((dec<16)?"0":"")+dec.toString(16); } function wipe0() { // full curtains var half=Math.floor(w_txl/2); if (w_cnt<w_txl) { c(w_cnt, (w_cnt<half)?hlcolour:w_flp); c(w_txl-w_cnt-1, (w_cnt<half)?hlcolour:w_flp); } } function wipe1() { // random var i, rand, temp; if (w_cnt==0) { for (i=0; i<w_txl; i++) { rand=Math.floor(Math.random()w_txl); temp=wrand[i]; wrand[i]=wrand[rand]; wrand[rand]=temp; } } if (w_cnt<w_txl) c(wrand[w_cnt], hlcolour); if (w_cnt>0 && w_cnt<w_txl+1) c(wrand[w_cnt-1], w_flp); } function wipe2() { // forwards if (w_cnt<w_txl) c(w_cnt, hlcolour); if (w_cnt>0 && w_cnt<w_txl+1) c(w_cnt-1, w_flp); } function wipe3() { // backwards if (w_cnt<w_txl) c(w_txl-(w_cnt+1), hlcolour); if (w_cnt>0 && w_cnt<w_txl+1) c(w_txl-w_cnt, w_flp); } function wipe4() { // searchlight if (w_cnt<w_txl) c(w_cnt, hlcolour); if (w_cnt>0 && w_cnt<w_txl+1) c(w_cnt-1, w_flp); if (w_cnt>1 && w_cnt<w_txl+2) c(w_cnt-2, hlcolour); if (w_cnt>2 && w_cnt<w_txl+3) c(w_cnt-3, (w_flp==fgcolour)?bgcolour:fgcolour); if (w_cnt==w_txl+2) w_flp=(w_flp==fgcolour)?bgcolour:fgcolour; } function wipe5() { // fade var i; if (w_cnt<w_txl+3) { var start=(w_flp==fgcolour)?bgcolour:fgcolour; var temp="#"; for (i=1; i<6; i+=2) { var hex1=parseInt(start.substring(i,i+2),16); var hex2=parseInt(w_flp.substring(i,i+2),16); temp+=dechex(Math.floor(hex1+(hex2-hex1)(w_cnt/(w_txl+2)))); } for (i=0; i<w_txl; i++) c(i, temp); } } function wipe6() { // flash var i; if (w_cnt<6Math.floor(w_txl/6)+3) { if (w_cnt%6==0 \|\| w_cnt%6==3) for (i=0; i<w_txl; i++) c(i, hlcolour); else if (w_cnt%6==1) for (i=0; i<w_txl; i++) c(i, w_flp); else if (w_cnt%6==4) for (i=0; i<w_txl; i++) c(i, (w_flp==fgcolour)?bgcolour:fgcolour); } } function wipe7() { // checkerboard var qtr=Math.floor(w_txl/4); if (w_cnt<qtr) { c(w_cnt, hlcolour); c(w_cnt+2qtr, hlcolour); } else if (w_cnt<2qtr) { c(w_cnt-qtr, w_flp); c(w_cnt+qtr, w_flp); } else if (w_cnt<3qtr) { c(w_cnt-qtr, hlcolour); c(w_cnt+qtr, hlcolour); } else if (w_cnt<w_txl) { c(w_cnt-2*qtr, w_flp); c(w_cnt, w_flp); } } function wipe8() { // half curtains var half=Math.floor(w_txl/2); if (w_cnt<half) { c(w_cnt, hlcolour); c(w_txl-w_cnt-1, hlcolour); } else if (w_cnt<w_txl) { c(w_cnt-half, w_flp); c(w_txl+half-w_cnt-1, w_flp); } } // ]]> </script> <span id="wipe">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</span> Copied!	Sample Blinking Text <style> #text { color: #000000; animation: blinkingText 1.2s infinite; } @keyframes blinkingText { 0% { color: #000000; } 49% { color: #000000; } 60% { color: white; } 99% { color: white; } 100% { color: #000000; } } </style> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!
Sample Jerky <style> .text { animation: jerky 0.5s infinite; } @keyframes jerky { 0% { transform: rotate(2deg); } 50% { transform: rotate(2deg); } 51% { transform: rotate(-2deg); } 100% { transform: rotate(-2deg); } } </style> <p class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!	Sample Candycane <style> .text { --color1: #1FD537; --color2: #E40010; -webkit-text-stroke: 1px black; background: repeating-linear-gradient( 45deg, var(--color1), var(--color1) 30px, var(--color2) 30px, var(--color2) 60px ); background-clip: text; color: transparent; -webkit-background-clip: text; animation: 40s linear 0s infinite move; } @keyframes move { from { background-position: 0px; } to { background-position: 1000px; } } </style> <div class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</div> Copied!
Sample Rainbow <style> @keyframes slide { 0% { background-position-x: 0%; } 100% { background-position-x: 300vw; } } .text { background-size: 300vw 300vw; text-align: -webkit-center; background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, #0f0 14.28%, #0ff 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%); -webkit-animation: 'slide' 10s infinite linear forwards; -webkit-text-fill-color: transparent; -webkit-background-clip: text; } </style> <p class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!	Sample Glow <style> @keyframes glow { 0% { text-shadow: 0 0 15px blue; } 50% { text-shadow: none; } 100% { text-shadow: 0 0 15px blue; } } @-webkit-keyframes glow { 0% { text-shadow: 0 0 15px blue; } 50% { text-shadow: 0 0 0; } 100% { text-shadow: 0 0 15px blue; } } #text { -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #000; font-weight:bold; -webkit-animation: glow 2.0s linear infinite; -moz-animation: glow 2.0s linear infinite; -ms-animation: glow 2.0s linear infinite; -o-animation: glow 2.0s linear infinite; animation: glow 2.0s linear infinite; } </style> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!
Rainbow Glow <script type="text/javascript"> // <![CDATA[ var speed=100; // speed colours change, 1 second = 1000 var glow=3; // can be set from '0' for no glow, to 10 var raincol=new Array("#ff0000", "#ff5500", "#ffaa00", "#ffff00", "#aaff00", "#55ff00", "#00ff00", "#00ff55", "#00ffaa", "#00ffff", "#00aaff", "#0055ff", "#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#ff00aa", "#ff0055"); // change the colours if you want to var alink="http://www.mf2fm.com/rv/"; // page to link text to (set to ="" for no link) /**************************** * Rainbow Text Effect * (c)2003-13 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var rainbow, raintxt, raincnt=0; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(regenbogen); function regenbogen() { if (document.getElementById) { var i, rainbeau; rainbow=document.getElementById("rainbow"); raintxt=rainbow.firstChild.nodeValue; while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]); for (i=0; i<raintxt.length; i++) { rainbeau=document.createElement("span"); rainbeau.setAttribute("id", "rain"+i); rainbeau.appendChild(document.createTextNode(raintxt.charAt(i))); if (alink) { rainbeau.style.cursor="pointer"; rainbeau.onclick=function() { top.location.href=alink; } } rainbow.appendChild(rainbeau); } rainbow=setInterval ("raining()", speed); }} function raining() { var i, c; for (i=0; i<raintxt.length; i++) { c=raincol[(i+raincnt)%raincol.length]; document.getElementById("rain"+i).style.color=c; if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px"; } raincnt++; } // ]]> </script> <span id="rainbow">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</span> Copied!	Downloading Data progress bar generator <script type="text/javascript"> // <![CDATA[ var news=Array("• downloading data ██████████████████████████████ 80%"); var cursor=""; // set cursor var delay=8; // seconds between each news item /**************************\ News Ticker Text Effect * (c)2004-14 mf2fm web-design * http://mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var newsp, cursp, flash, item=0; if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addRVLoadEvent(teleprint); function teleprint () { if (document.getElementById) { var span=document.getElementById("news"); while (span.childNodes.length) span.removeChild(span.childNodes[0]); delay=1000; newsp=document.createElement("span"); cursp=document.createElement("span"); cursp.appendChild(document.createTextNode(String.fromCharCode(160)+cursor)); span.appendChild(newsp); span.appendChild(cursp); ticker(); }} function ticker() { var i; while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]); newsp.appendChild(document.createTextNode(news[item].substring(0,1))); for (i=1; i<news[item].length; i++) setTimeout('newsp.firstChild.nodeValue="'+news[item].substring(0, i+1)+'"', 100i); if (news[item].indexOf("www")!=-1) setTimeout('linkit('+item+')', 100i); setTimeout('flash=setInterval("http://cursp.style.visibility=(http://cursp.style.visibility==\'visible\')?\'hidden\':\'visible\'", 234)', 100*i) setTimeout('clearInterval(flash)', delay); setTimeout('http://cursp.style.visibility="visible"', delay); setTimeout('ticker()', delay); item=++item%news.length; } function linkit(q) { var a,p,e,l; p=news[q].indexOf("www"); e=news[q].indexOf(" ", p); if (e==-1) e=news[q].length; l=news[q].substring(p, e); while (newsp.childNodes.length) newsp.removeChild(newsp.childNodes[0]); newsp.appendChild(document.createTextNode(news[q].substring(0, p))); a=document.createElement("a"); a.href="http://"+l; a.appendChild(document.createTextNode(l)); newsp.appendChild(a); newsp.appendChild(document.createTextNode(news[q].substring(e))); } // ]]> </script> <span id="news"></span> Copied!
Sample Shaky Filter <style> @keyframes squiggly-anim { 0% { -webkit-filter: url("#squiggly-0"); filter: url("#squiggly-0"); } 25% { -webkit-filter: url("#squiggly-1"); filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); filter: url("#squiggly-2"); } 75% { -webkit-filter: url("#squiggly-3"); filter: url("#squiggly-3"); } 100% { -webkit-filter: url("#squiggly-4"); filter: url("#squiggly-4"); } } #text { animation: squiggly-anim 0.5s linear infinite; } .svg-container { width: 0; height: 0; overflow: hidden; } </style> <span class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <defs> <filter id="squiggly-0"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" /> <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-1"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-2"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-3"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-4"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> </defs> </svg> </span> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!	Sample Infinite Shake <style> #text { padding:4px; animation: shake 0.5s infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(0deg); } } </style> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!
Sample Bouncy text <style> .text { position: relative; top: 0; animation: bounce 0.3s ease infinite alternate; } @keyframes bounce { 100% { top: -.2rem; } } </style> <p class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!	Sample Glitch <style> #text { /* animation: glitch-2 1s infinite linear; */ animation: glitch-1 2s infinite linear; } @keyframes glitch-1 { 0%, 12%, 15%, 52%, 55%, 82%, 85%, 100% { opacity: 1; transform: scaleX(1) scaleY(1); } 13% { opacity: .8; transform: scaleY(2); color: #; } 53% { opacity: .8; transform: scaleX(.7); color: #; } 83% { opacity: 8; transform: rotate(-10deg); color: #; } } @keyframes glitch-2 { 13% { color: #; } 53% { color: #; } 83% { color: #; } } </style> <div id="text">glitch text</div> Copied!
Sample Rainbow outline <style> .text { -webkit-text-fill-color: #fff; -webkit-background-clip: text; font-family: Arial Black, Gadget, sans-serif; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FF0000; -webkit-animation: animatedBackground_c 2s infinite alternate; } @keyframes animatedBackground_c { 0% {-webkit-text-stroke-color: #FFA53A} 10% {-webkit-text-stroke-color: #FFE53A} 20% {-webkit-text-stroke-color: #E8FF3A} 30% {-webkit-text-stroke-color: #A5FF3A} 40% {-webkit-text-stroke-color: #3AFF4E} 50% {-webkit-text-stroke-color: #3AFFAE} 60% {-webkit-text-stroke-color: #3AF3FF} 70% {-webkit-text-stroke-color: #3AA2FF} 80% {-webkit-text-stroke-color: #4B3AFF} 90% {-webkit-text-stroke-color: #B43AFF} 100% {-webkit-text-stroke-color: #FF3AEE} } </style> <div class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</div> Copied!

Text Styles

ScRiPted Double Border <style> .scripted { filter: drop-shadow( 0 3px #9a6fb0) drop-shadow( 2px 0 #9a6fb0) drop-shadow( 0 -1px #ffa9c2) drop-shadow( -1px 0 #9a6fb0) drop-shadow( 0 5px white) drop-shadow( 5px 0 white) drop-shadow( 0 -5px white) drop-shadow( -5px 0 white) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow(1px 1px 0 rgba(172,172,172,0.6)) drop-shadow( 0 0 2px #424242); color:#FDE6FF; font-family: ecoder; } @font-face { font-family: ecoder; src: url(https://dl.dropbox.com/s/2wrgv8i3jsqkv6p/Ecoder-Italic.otf); } </style> <p class="scripted">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!	90 degree Gradient Text <style> #text { white-space: nowrap; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #4d4d4d; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } </style> <div> <h1 id="text"> /* patorjk code */ </h1> </div> instructions: 1. go to https://patorjk.com/text-color-fader/ to have the colors gradient and choose HTML format 2. or choose any gradient generator Copied!
Sample GIF on Text <style> .text { background-image: url("https://media.giphy.com/media/70BItD093Mhnq/giphy.gif"); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> <div class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</div> Copied!	Sample Gradient Text <style> .text{ background: linear-gradient(to top, #FFFDFE 2%, #FF78B1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #FE62B6; } </style> <p class="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</p> Copied!
Sample Mark: Stitch Style <style> .text{ background: #9a8c98; border: 1px dashed #fff; box-shadow: 0 0 0 3px #9a8c98; padding: 2px; } </style> <p id="text">Cupcake ipsum dolor sit amet oat cake apple pie marshmallow</a> Copied!	Sample Single Color Outline #text { -webkit-text-stroke: 1px purple; color:white; } Copied!
Sample Dotted Underline text-decoration: underline; text-decoration-style: dotted; Copied!	Sample Wavy Underline text-decoration-line: underline; text-decoration-style: wavy; Copied!
Sample Underline text-decoration-line: underline; text-decoration-style: solid; Copied!	Sample Highlight Style 1 background-color:#c9c6cc; font-color: #000; border-radius: 100%; Copied!
Sample Highlight Style 2 background-image: radial-gradient(#e0b8ff 30%, transparent 70%); Copied!	Sample Highlight Style 3 background-image: radial-gradient(#F5A6E6 30%, transparent 70%); /* inner shadow / border-radius:100%; border: 1px solid white; / border white / -webkit-box-shadow: 0px 0px 5px 0px #7FC8F8; / shadow / -moz-box-shadow: 0px 0px 5px 0px #7FC8F8; / shadow / box-shadow: 0px 0px 5px 0px #7FC8F8; / shadow */ Copied!
♡ Magica Heart <style> @font-face { font-family: 'Magica'; src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf); } </style> <span style="font-size:14px;font-family: 'Magica'; font-style:normal;">♡</span> Copied!	♡ Gamja Flower <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet"> <span style="font-family: 'Gamja Flower', cursive; font-style:normal;"> ♡</span> Copied!

Text Hovers

Sample Expand Hover .txt-expandhover{ transition: 0.4s; } .txt-expandhover:hover{ letter-spacing: 7px; } Copied!	Sample Blur Hover <style> .txt-blurtext:hover{ webkit-filter: blur(0.5px); filter: blur(2px); } </style> <p class="txt-blurtext">Hey There!</p> Copied!
Sample Underline On hover <style> .link { position: relative; transition: clip-path 275ms ease; } .link:hover span::before, .link:focus span::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .link span { position: relative; display: inline-block; } .link span::before { position: absolute; content: attr(data-content); text-decoration: underline; clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); transition: clip-path 275ms ease; } </style> <!-- links uses a span class as you can see; in order for it to work properly, the text in the span data-content line needs to match the text you're making a link.--> <p class="link"><span data-content="Sample">Sample</span></p> Copied!	Sample Dashed on Hover <style> .link { position: relative; transition: clip-path 275ms ease; } .link:hover span::before, .link:focus span::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .link span { position: relative; display: inline-block; } .link span::before { position: absolute; content: attr(data-content); text-decoration: underline; clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); transition: clip-path 275ms ease; } span.wavy::before { text-decoration-style: wavy; } </style> <!-- links uses a span class as you can see; in order for it to work properly, the text in the span data-content line needs to match the text you're making a link.--> <p class="link"><span class="dashed" data-content="Sample">Sample</span></p> Copied!
Sample Squiggly Line on Hover <style> .link { position: relative; transition: clip-path 275ms ease; } .link:hover span::before, .link:focus span::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .link span { position: relative; display: inline-block; } .link span::before { position: absolute; content: attr(data-content); text-decoration: underline; clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%); transition: clip-path 275ms ease; } span.dashed::before { text-decoration-style: dashed; } </style> <!-- links uses a span class as you can see; in order for it to work properly, the text in the span data-content line needs to match the text you're making a link.--> <p class="link"><span class="wavy" data-content="Sample">Sample</span></p> Copied!	Sample Wavy on Hover #text01:hover{ text-decoration-line: underline; text-decoration-style: wavy; } Copied!
Sample Underline on Hover #text01:hover{ text-decoration-line: underline; text-decoration-style: solid; } Copied!	Sample Dotted on Hover #text01:hover{ text-decoration-line: underline; text-decoration-style: dotted; } Copied!
Sample Italic on Hover #text01:hover{ text-decoration-line: underline; text-decoration-style: dotted; } Copied!	Sample Float on Hover #text01:hover{ transition: .2s ease; transform: translate(0, -6px); } Copied!
Sample Change color on Hover #text01:hover{ color:red; } Copied!	Sample Color Sideways on Hover <style> a.wow:link { text-decoration: none; } a.wow::before { transform: scaleX(0); transform-origin: bottom right; } a.wow:hover::before { transform: scaleX(1); transform-origin: bottom left; } a.wow::before { content: " "; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0 0 0 0; background: #D64933; z-index: -1; transition: transform .5s ease; } a.wow { position: relative; } </style> <a class="wow" href="#home">Wipe Sideways</a> Copied!
Sample Background color on Hover #text01{ box-shadow: inset 0 0 0 0 #FFABD9; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; } #text01:hover { box-shadow: inset 0 50px 0 0 purple; color:white; } Copied!	Sample Breeze link (c) carrduser #text01 { transition: .9s linear; background: none; display: inline-block; text-decoration: none; } #text01:hover{ transform: translate(0px,0px) rotatex(0deg) rotatey(41deg) rotatez(58deg) skewX(0deg) skewY(0deg) scaleX(1) scaleY(1); transition: .9s linear; } Copied!
Sample Sound effect on hover or click <script> // Mouseover/ Click sound effect- by JavaScript Kit (www.javascriptkit.com) // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code // Usage: Instantiate script by calling: var uniquevar=createsoundbite("soundfile1", "fallbackfile2", "fallebacksound3", etc) // Call: uniquevar.playclip() to play sound var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var mouseoversound=createsoundbite("https://a.tumblr.com/tumblr_ojrn7aGBii1w2e2oyo1.mp3") var clicksound=createsoundbite("https://a.tumblr.com/tumblr_ojrmy55yUN1w2e2oyo1.mp3") </script> <p onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">Hover or Click Sound</p> Copied!