22 نمونه متن متحرک با CSS

22 نمونه متن متحرک با CSS

در این مطلب قصد  داریم مجموعه ای بی نظیر از متن های متحرک که با استفاده از html و css ساخته شده است را معرفی نماییم. در ادامه می توانید این مجموعه بی نظیر و کدهای اماده آن را دانلود کنید و در وب سایت خود استفاده کرده از آن لذت ببرید.

TEXT ANIMATION

طراح: Keny Zachelin – November 30, 2018                                           نوشته شده با: HTML / CSS / JavaScript

دمو و کد

درباره کد

TEXT ANIMATION

متن متحرک طراحی شده با HTML – CSS – JS

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              از زبان فارسی پشتیبانی نمی کند


SHINING TEXT ANIMATION EFFECTS

طراح: FrankieDoodie – October 13, 2018                                          نوشته شده با: CSS / HTML

دمو و کد

درباره کد

SHINING TEXT ANIMATION EFFECTS

متن متحرک و درخشان طراحی شده با کدهای HTML – CSS

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              از زبان فارسی پشتیبانی می کند


ANIMATED TEXT GRADIENT

طراح: chrishodges – June 8, 2018                                       نوشته شده با: CSS / HTML

دمو و کد

درباره کد

ANIMATED TEXT GRADIENT

با استفاده از CSS سفارشی شده متن به صورت افقی در حال حرکت است.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              از زبان فارسی پشتیبانی می کند


HANDWRITING ANIMATION

طراح: Marina – June 8, 2018                                     نوشته شده با: CSS / HTML

دمو و کد

درباره کد

HANDWRITING ANIMATION

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              از زبان فارسی پشتیبانی می کند – نوشته ها به صورت svg است (منبع یادگیری svg)


PURE CSS TEXT ANIMATION

طراح: Arlina Design – May 25, 2018                                 نوشته شده با: CSS / HTML

دمو و کد

درباره کد

PURE CSS TEXT ANIMATION

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              از زبان فارسی پشتیبانی نمی کند


MASKING PATH ANIMATION

طراح: Envato Tuts+ – February 14, 2018                                نوشته شده با: CSS / HTML

دمو و کد

آموزش

درباره کد

MASKING PATH ANIMATION

گاهی اوقات یک طراحی ساده می تواند در عین حال پیچیده باشد. در این نمونه ساده متن و حالت حرکت (انیمیشن) آن در پوشش SVG از یکدیگر جدا شده است.

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              از زبان فارسی پشتیبانی می کند – نوشته ها به صورت svg است (منبع یادگیری svg)


CSS ONLY FROZEN TEXT

طراح: Mandy Michael – January 17, 2018                           نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

CSS ONLY FROZEN TEXT

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


HTML, CSS AND JS LETTER ANIMATION

طراح: Florin Pop – September 6, 2017                          نوشته شده با: HTML / CSS / JavaScript

دمو و کد

درباره کد

HTML, CSS AND JS LETTER ANIMATION

طراحی حروف متحرک با CSS

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی نمی کند


CSS TEXT REVEALING ANIMATION

طراح: Nooray Yemon – August 28, 2017                        نوشته شده با: HTML / CSS

دمو و کد

درباره کد

CSS TEXT REVEALING ANIMATION

*****

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


SVG VIDEO MASK ON TEXT

طراح: Simon Evans – June 16, 2017                       نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

SVG VIDEO MASK ON TEXT

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند – نوشته ها به صورت svg است (منبع یادگیری svg)


TEXT SHADOW ANIMATE

طراح: Wyatt Nolen – June 10, 2017                      نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

TEXT SHADOW ANIMATE

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


ANIMATED WAVE CLIPPED BY TEXT

طراح: web-tiki – January 2, 2017                     نوشته شده با: HTML / CSS

دمو و کد

درباره کد

ANIMATED WAVE CLIPPED BY TEXT

متن

مرورگرهای سازگار:              Chrome, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند – نوشته ها به صورت svg است (منبع یادگیری svg)


PURE CSS TEXT ANIMATION

طراح: Robin Treur – September 10, 2016                     نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

PURE CSS TEXT ANIMATION

متن متحرک با CSS و HTML

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


IMPOSSIBLY TIPSY

طراح: James Mellers – June 8, 2016                   نوشته شده با: HTML / CSS

دمو و کد

درباره کد

IMPOSSIBLY TIPSY

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


TEXT ANIMATION: MONTSERRAT

طراح: Claire Larsen – October 21, 2015                  نوشته شده با: HTML / CSS

دمو و کد

درباره کد

TEXT ANIMATION: MONTSERRAT

مرورگرهای سازگار:               Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


WAVE TEXT EFFECT

طراح: Lucas Bebber – September 1, 2015                 نوشته شده با: (HTML / CSS (Stylus

دمو و کد

درباره کد

WAVE TEXT EFFECT

افکت موج دار برای متن با استفاده از حالت SVG/blend

مرورگرهای سازگار:               Chrome, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند – نوشته ها به صورت svg است (منبع یادگیری svg)


CSS ONLY RANDOM TEXT TRANSFORM

طراح: lefoy – July 26, 2015               نوشته شده با: (HTML (Pug) / CSS (SCSS

دمو و کد

درباره کد

CSS ONLY RANDOM TEXT TRANSFORM

تولید متن تصادفی متغیر با CSS

مرورگرهای سازگار:              Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی نمی کند


ANIMATED TEXT

طراح: Cesar C. – February 17, 2015           نوشته شده با: (HTML (Pug) / CSS (SCSS

دمو و کد

درباره کد

ANIMATED TEXT

متن متحرک  طراحی شده به صورت کامل با SVG

مرورگرهای سازگار:              Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند – نوشته ها به صورت svg است (منبع یادگیری svg)


ANIMATED TEXT-SHADOW PATTERN

طراح: carpe numidium – December 21, 2013          نوشته شده با: HTML / CSS

دمو و کد

درباره کد

ANIMATED TEXT-SHADOW PATTERN

با ترکیب background-clip: text & linear-gradient می توانید سایه های راه راه برای متن خود شبیه سازی کنید.

مرورگرهای سازگار:              Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند


SMOKY TEXT

طراح: Bennett Feely – August 2, 2013          نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

SMOKY TEXT

برای طراحی حالت و افکت دود مانند می توانید از ترکیب متن سایه دار و CSS متغیر استفاده کنید.

مرورگرهای سازگار:              Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی نمی کند


ANIMATED TEXT FILL

طراح: Daniel Riemer – April 13, 2013         نوشته شده با: (HTML / CSS (SCSS

دمو و کد

درباره کد

ANIMATED TEXT FILL

پشت زمینه متن های خود را با تصاویر مترح بپوشانید. در این حالت نیاز به فایل های جاوا اسکریپت ندارید.

مرورگرهای سازگار:              Chrome, Edge, Firefox, Opera, Safari

جزئیات:                              زبان فارسی پشتیبانی می کند

احسان دربندی

از سال 86 فعالیتم رو در حوزه IT شروع کردم و علاقمند فناوری جدید در حوزه IT شدم ، از همان سال های اولیه به فکر راه اندازی کسب کار بودم و تا اینکه خودم رو به عنوان کار افرین پیدا کردم و عاشق کار افرینی شدم . در حال حاضر یک توسعه دهنده حرفه ای هستم و عاشق خدمت رسانی به مردم کشورم ....

ارسال دیدگاه

* .ایمیل ادرس شما منتشر نخواهد شد