116 menő CSS szöveghatás példa, amit letölthetsz

Hirdetés

A webes tipográfia az egyik legfontosabb dolog, ami drámaian megváltozott a CSS3 segítségével. Néhány egyszerű CSS-trükkel vonzóvá teheted a dizájnodat.

A webdesignban a CSS segítségével sokféle betűhatást érhetsz el, többek között olyan effekteket használhatsz, mint az animáció és a vágás, hogy egy kicsit feldobd a dolgokat.

Hogy ezt még jobban szemléltessük, összeállítottunk egy listát vizuálisan lenyűgöző és gyönyörű effektusokról, amelyek mindegyike CSS segítségével valósul meg, és néhányuk egy kis Javascript segítségével is.

Tartalomjegyzék

• Animated CSS text effects
• CSS Shadow text effects
• 3D CSS text effects
• CSS text background
• CSS hover text effects
• CSS glitch text effects
• Cool CSS szöveghatások

CSS animált szöveghatások

Text animáció

A második ilyen CSS szöveghatás Yoann Helintől származik. Ő készítette CSS-ben ezt a hatást, amelyet már sok portfólió- és prezentációs weboldalon láthattál.

Soros szöveg.

Animated text with HTML, CSS and JavaScript.

COSMOS

Bár ez a CSS szöveghatás nem a leghasznosabb, mégis lenyűgöző.

Itt van, amit a szerző használt:

• vw, vh, vmin egységek a reszponzivitás érdekében
• flexbox, hogy mindent középre állítsunk
• több box-shadow a csillagokhoz
• keyframes animáció a bolygókhoz
• transform a bolygók forgatásához

Animated “text-shadow” minta

Uses -webkit-background-clip: text & lineáris-gradienst a csíkos szövegárnyék szimulálásához.

Hirdetés

Aláírás animált aláírása (SVG-útvonalak)

Ezzel a tollal animálja az aláírás írását SVG stroke-dashoffset/stroke-dasharray és CSS-átmenetek segítségével.

SVG Path animated Text

A “Design” szöveg animálása egy SVG path alapján. Click toggle animation.

Animated text fill with svg text practice

Animated text fill with HTML(Pug), CSS(SCSS) and SVG.

Animated text with Snapsvg

Work with this feels like a old good Flash 🙂

Vertically rotating text css w/ browser prefixes

Vertically rotating text with HTML and CSS.

forgó szöveg

HTML, CSS és JavaScript forgató szöveg.

#Codevember 3D Quote Rotator

A GreenSock és a SplitText plugin használatával 3D szöveghatást hozhatunk létre.

Impossibly Tipsy

Érdekes szöveghatás.

Foggy text effect

Cinematic intro text effect (Webkit only – text mask). Ez még kísérleti jellegű, de mégis fel kellett venni ezek közé a CSS effektek közé.

webdev-series – Colorful text animation #updated

Folyékony és konfigurálható színes szöveganimációs modul SCSS-el készült.

CSS Text filling with water

A következő ilyen CSS szöveghatás egy vízzel töltött szöveg animáció, preloaderekhez és hasonlókhoz.

GSAP szöveganimáció

Text effekt a Greensock segítségével.

Wave szöveghatás (SVG/blend móddal)

Wave text effect with HTML and CSS.

Shattering Text Animation

GSAP szöveganimáció. SVG útvonal széttörése. Lassú mozgás hoverre.

Squiggly Text

Squiggly text kísérlet SVG szűrőkkel.

Animated Headlines

Az animált főcímek gyűjteménye, felcserélhető szavakkal, amelyek CSS átmenetekkel váltják egymást.

Textanimáció: Montserrat

HTML és CSS szöveganimáció.

Shaded Text

Shaded text, egy SVG + CSS3 kísérlet az animált árnyékokról. Nincs mobileszközökre optimalizálva… még.

Animating SVG text

HTML, CSS és SVG animáló szöveg.

szövegszín-rajzolás

Szöveg rajzolása a greensock drawSVG plugin segítségével.

Tiszta CSS szöveganimáció

HTML és CSS szöveganimáció.

Animated text fill

Töltse ki a szövegét animált háttérképpel – nincs szükség JavaScriptre.

Buborékos szöveghatás

Egy jQuery-alapú példa arra, hogyan hozhatsz létre buborékos hatást egy HTML-fejlécen. A buborékok úgy tűnnek, mintha a szöveg mögül jönnének, majd elhalványulnak és eltűnnek.

Smoky Text

A text-shadow és a CSS transzformációk (különösen a skew) kombinálása a füstös (vagy füstös?) hatás érdekében.

jquery break/animate warping text paragraph example

HTML, CSS és JavaScript break/animate warping text paragraph example.

Animated wave clipped by text

Animated wave inside text with svg. Kép a háttérben és a hullámot kitöltő gradiens.

(cool) text effect

Animated text with GIF image.

Untitled

Animált szöveg HTML, CSS és JS képekkel.

Splitted text reveal

HTML, CSS és JavaScript splitted text reveal.

Hagymabőrös szövegmorfizálás

Hagymabőrös szövegmorfizálás HTML/CSS/JS-ben.

Text-árnyék animáció

Text-árnyék animáció HTML és CSS segítségével.

SVG videómaszk a szövegre

SVG videómaszk a szövegre.

GSAP szövegfeltáró animáció

GSAP szövegfeltáró animáció.

SVG szöveganimáció

Klassz SVG szöveganimáció.

CSS Only Random Text Transform (Animated)

Generate random text transformation using only CSS.

Silent Movie Text Effect

Movie text effect with canvas.

CSS SZÖVEGFELFEDÉLYEZŐ ANIMÁCIÓ

Tiszta CSS szövegfeltáró animáció.

Levél animáció

Animáló betűk CSS-szel.

Szövegsor-animáció

Klassz szövegsor-animáció TweenMax.js segítségével.

Helo!

Kattints az újra rajzoláshoz! A sprite-ok szövegre való leképezése mindig szórakoztató.

CSS only Frozen text

CSS only frozen text effect with background-clip, blend modes and gradient text.

betű-effekt

betű-effekt görgetéskor.

Masking Path Animation

Néha az egyszerű is ugyanolyan hatékony, mint az összetett.

Kézírás animáció (SVG + CSS)

SVG és CSS kézírás animáció. Az SVG animációhoz való optimalizálása érdekében a grafikát kisebb darabokra aprították. Ez elsősorban azért történt, hogy az útvonalelemek ne fedjék egymást a nem kapcsolódó clipPath elemekkel, de az animáció finomabb vezérlését is lehetővé tette. Az összes animált útvonalelemet Adobe Illustratorból exportáltuk és kóddal finomhangoltuk.

Animated Text Gradient

Nice animated text with gradient.

CSS Shadow szöveghatások

CSS Dashed Shadow

Pure css hipster-ish tipographic dashed shadow.

Hit The Floor Text Effect

CSS3 text-shadow effects

HTML és CSS3 text-shadow effects.

Long Shadow Gradient Mixin

A Sass (Scss) Mixin a hosszú árnyék gradiensek gyors létrehozásához. Alkalmas mind a ‘text-shadow’-hoz, mind a ‘box-shadow’-hoz.

CSS Text Shadow

Megpróbálom a Lynda.com bemutatóját. CSS: Advanced Typographic Techniques using lettering.js

Text-Shadow

HTML és CSS text-shadow.

Félelmetes szövegárnyék

Félelmetes szövegárnyék CSS3 segítségével.

Shadow Parallax – Reactjs

Move your Mouse and Play words. React, ES6, Babel transzpilerrel íródott.

Neon text-shadow effect

9 neon CSStext-shadow effects.

Szöveg formázása SVG-vel (második árnyék)

Szöveg formázása SVG-vel.

Szép árnyék

Szép árnyék HTML és CSS segítségével.

Text-shadow

Tiszta CSS szövegárnyék.

Fancy text shadow

Fancy text shadow.

Groovy CSS Effect

1960-as évekbeli betűhatás a CSS text-shadow tulajdonság használatával a SASS funkcióval és mixinekkel együtt, hogy a kód DRY maradjon.

3D CSS szöveghatások

3d Text effect – mousemove

Nice 3D Text effect with jQuery mousemove.

3D extrude text effect- CSS only

HTML és CSS 3D extrude text effect.

CSS Text Stroke | CSS Text Border – Végtelen hatás csak #CSS #html5-vel

Változtassa meg a szöveget, hogy újra láthassa az animációt.

3D CSS tipográfia

Egyetlen elem, többszínű 3d szöveghatás

Egyetlen elem többszínű szöveggel és 3D szövegárnyékhatással. Csak játék a különböző CSS tulajdonságokkal, hogy szórakoztató szöveghatásokat hozzon létre.

Csak SS: Text Wave

Csak CSS text wave.

Görbe és elforgatott szöveg

Text with CSS skew() and rotate().

3d text marquee effects

3D text marquee effects.

CSS szövegháttér

-webkit-background-clip:text CSS-effekt

A webkit böngészőben a -webkit-background-clip: text és a -webkit-fill-text-color : transparent segítségével a szöveghez hátteret lehet alkalmazni.

Beállíthat egy színvisszalépést más böngészőhöz.

Háttérkivágás

Text background clipping.

SVG Knockout Text with Video Background

Ez a demó a knockout szöveg/útvonal létrehozását vizsgálja SVG-ben, és egy YouTube-videó loopolását kitöltésként.

SVG szövegmaszk

Gooey text background with SVG filters

Példa egy gooey SVG filter használatára, hogy sima éleket hozzon létre a háttérrel rendelkező inline szöveg körül.

Moving Cloud Text | HTML + CSS

Moving cloud text with HTML and CSS.

CSS-kísérletek szövegre inline ferde háttérrel

A ferde háttér használata csak akkor jelenik meg, ha az elem display: block vagy inline-block. Ezek közül néhány ugyanúgy néz ki széles nézetablakon, de a nézetablak szélességének csökkentésekor másképp hibázik.

CSS hover szöveghatások

Nyitótípus

Efek tipográfia szöveg neon 1. rész

Text design (tipográfia) neon hatással.

Text-maszk háttér mozgó MouseMove – v2

A “background-clip: text” új funkció kipróbálása, mozgó háttérrel.

Peeled Text Transforms

Ez a toll olyan szöveget mutat, mintha lehámoznák az oldalról. Sima animációval rendelkezik, amikor lebegtetjük.

Boldog szöveg

HTML és CSS happy text effect.

Animated highlighted text

Az ötlet egyszerű, lineáris gradienst és átmenetet használ.

3d hover text effect

HTML, CSS és JavaScript 3d hover text effect.

CSS Perspective Text Hover

Kísérlet a webfonts és a CSS 3D transzformációs eszközök kombinációjával.

Fókuszált szöveg lebegtetési effekt | HTML+ CSS + jQuery

Hover CSS effekt szöveghez.

animált aláhúzás

Demó egy animált aláhúzás effektről. Tiszta CSS animáció.

Hogyan kapok egy egyéni színes aláhúzást, amely több soron átível?

Szép aláhúzás hover effekt.

Egyszerű CSS Hover Effect a Sass Loops segítségével

Egyszerű kis hover animáció. A Sass hurokkal nagyon könnyen megvalósíthatók a megdöbbentő animációs késleltetések… sok mindent ki lehet belőlük hozni.

Spring Text Hover Effect

Most játszottam a gombok effektjeivel, és úgy gondoltam, hogy ez elég király.

Blended text layers

Content generated with JS.

CSS glitch szöveg

Colorful Glitchy 404

CSS glitched text by skew

HTML és CSS glitched text by skew.

CSS-Only Glitch Effect

Glitch fajta effekt CSS animációval.

Glitch

Glitch szöveg HTML és CSS segítségével.

Glitchy Text

Glitchy szöveg HTML és CSS(SCSS) segítségével.

Glitch szöveg

HTML(Pug) és CSS(SCSS) glitch szöveg.

Glitched Text (The Verge tanulmánya)

HTML, CSS és JavaScript glitched text.

SVG Glitch

VHS szöveg

VHS szöveg HTML, CSS és JavaScript segítségével.

Psycho Glitch (CSS-változók & @keyframes)

A “glitch” hatás, újraalkotva animált CSS egyéni tulajdonságokkal. Pure CSS.

Simple text glitch

Pure CSS simple text glitch.

Cool CSS szöveghatások

Slashed CSS Effect

Elastic stroke CSS + SVG

Az első ilyen cool CSS szöveghatások közül Yoksel-től származik. Csodálatos színsémát választott ehhez a gyönyörű CSS szöveganimációhoz.

SVG Text: Animált gépelés

HTML, CSS és SVG animált gépelés.

Text gépelés thingamy

HTML, CSS és JavaScript text tipping thingamy.

Futuristic Resolving/Typing Text Effect feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.

Transmission: Glowing Text Animation

Egy kis izzó szöveganimáció. Először is, néhány JS, hogy minden betűt egy spanba csomagoljunk. Ezután egy keyframe animáció, animáció-késleltetés mixinnel, egymás után világít minden egyes betűt.

Text Scramble Effect

Egy kis szövegdekódolás/scramble effekt.

Kinetikus típus Greensockkal

Kinetikus típus HTML, CSS és JavaScript (Greensock) segítségével.

LOVE Text Effect

Scrambled text effect inspired by the award winning Science Fiction film “LOVE”.

Auto gépelő szöveg (funkció)

Auto gépelő szöveg HTML, CSS és JavaScript segítségével.

Gépelt szöveg

HTML, CSS és JavaScript által gépelt szöveg.

Gépelt szöveghatás

Egyszerű JQuery funkcióval készült szöveggépelési hatás. Egyszerűen hívja meg a függvényt az animálni kívánt elemmel, mint első argumentummal és az animációs sebességgel, mint második argumentummal.

Ha tetszett ez a CSS szöveghatásokkal foglalkozó cikk, akkor ezeket a cikkeket is érdemes megnézned:

• CSS és Javascript animációs könyvtárak félelmetes effektek létrehozásához
• CSS diavetítés példák, amelyeket felhasználhatsz a webhelyeidben
• A Githubon található néhány legnépszerűbb CSS könyvtár