Tipografía animada de diseño digital VFS

2,338 smartclass703

Abrir en el editor Publica tu código

Tipografía animada de diseño digital VFS

Recomendado

27 November 2025

Ejemplo de código de botón HTML

24 December 2024

Un código de fastclass383

30 October 2025

Código HTML de la animación de carga de ojos CSS

HTML

<html class=" ui-mobile ui-mobile-rendering js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths" lang="en"><head><base href="https://vfsdigitaldesign.com/animatedtypeface/"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Neo Latina Animated Typeface Project | VFS Digital Design</title> <meta name="description" content="Animated Typeface Project is a collaborative project by students in term 3 for the Neo Latina typeface."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="fb:app_id" content="2005007956431749"> <meta property="og:type" content="website"> <meta property="og:url" content="http://vfsdigitaldesign.com/animatedtypeface"> <meta property="og:title" content="Neo Latina Animated Typeface Project | VFS Digital Design"> <meta property="og:image" content="http://vfsdigitaldesign.com/animatedtypeface/img/B_uchenna.jpg"> <meta property="og:description" content="Animated Typeface Project is a collaborative project by students in term 3 for the Neo Latina typeface."> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="img/at-icon-older-iPhone.png"> <link rel="apple-touch-icon" sizes="180x180" href="img/at-icon-iPhone-6Plus.png"> <link rel="apple-touch-icon" sizes="152x152" href="img/at-icon-iPad-Retina.png"> <link rel="apple-touch-icon" sizes="167x167" href="img/at-icon-iPad-Pro.png"> <link rel="shortcut icon" href="img/vfsicon.ico"> <link rel="author" href="http://vfsdigitaldesign.com/animatedtypeface/humans.txt"> <link href="https://fonts.googleapis.com/css?family=Neo Latina&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> <link rel="stylesheet" href="css/styles.css"> <script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-ZEXYWZ5DXW&cx=c&_slc=1"></script><script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="js/vendor/modernizr-2.8.3.min.js"></script> </head> <body> <input id="menu-checkbox" role="checkbox" type="checkbox"> <div class="off-canvas-wrapper"> <label for="menu-checkbox" class="menu-toggle"> <span class="screen-reader">Open main menu</span> <span class="icon fa-bars" aria-hidden="true">MENU</span> </label> <nav id="menu" class="menu" role="navigation" aria-expanded="false" aria-label="Main menu"> <article class="logo"> <a role="link" href="http://vfsdigitaldesign.com/animatedtypeface"><img role="img" src="img/vfsdd-logo-redHoriz.svg" alt="VFS Digital Design logo"></a> </article> <label for="menu-checkbox" class="menu-close"> <span class="sr-only">Close main menu</span> <span class="icon fa-close" aria-hidden="true"></span> </label> <div class="section-heading">Main menu</div><div class="skip"><a role="link" href="#content">Skip to content</a></div><ul class="clearfix"> <li class="tab16"><a id="active16" role="link" aria-current="page" href="index.html">Neo Latina</a></li><li class="tab15"><a role="link" aria-current="page" href="dd44-gugi.html">Gugi</a></li><li class="tab14"><a role="link" href="dd43-fanwood.html">Fanwood</a></li><li class="tab13"><a role="link" href="dd42-raleway.html">Raleway</a></li><li class="tab12"><a role="link" href="dd41-goudybookletter.html">Goudy Bookletter</a></li><li class="tab11"><a role="link" href="dd40-leaguemono.html">League Mono</a></li><li class="tab10"><a role="link" href="dd39-sniglet.html">Sniglet</a></li><li class="tab9"><a role="link" href="dd38-sortsmillgoudy.html">Sorts Mill Goudy</a></li><li class="tab8"><a role="link" href="dd37-ostrich.html">Ostrich Sans</a></li><li class="tab7"><a role="link" href="dd36-junction.html">Junction</a></li><li class="tab6"><a role="link" href="dd35-orbitron.html">Orbitron</a></li><li class="tab5"><a role="link" href="dd34-leaguespartan.html">League Spartan</a></li><li class="tab4"><a role="link" href="dd33-knewave.html">Knewave</a></li><li class="tab3"><a role="link" href="dd32-leaguegothic.html">League Gothic</a></li><li class="tab2"><a role="link" href="dd31-blackout.html">Blackout Midnight</a></li><li class="tab1"><a role="link" href="dd30-chunkfive.html">Chunk Five</a></li></ul> </nav> <label for="menu-checkbox" class="mobile-backdrop" tabindex="-1" aria-hidden="true" hidden=""></label> </div><section class="container" id="content"> <header> <article class="banner banner16"> <h1 class="banTxt banTxt16" role="heading" aria-level="1">Animated Typeface <span class="mobile-hidden">Project</span></h1> </article> </header> <div class="desc"> <p>Animated Typeface is a collaborative project by students of the VFS Digital Design program. In Term 3, they create 3-4 glyph sequences for the typeface. To visit our community site, visit <a role="link" href="http://community.vfs.com/oomph" target="_blank" rel="noopener noreferrer">VFS Oomph</a>. To find out more about the VFS Digital Design program and what we offer, visit <a role="link" href="http://vfs.edu/programs/digital-design" target="_blank" rel="noopener noreferrer">VFS Digital Design Program</a>.</p></div><section class="clearfix"> <img class="item nl" role="img" src="img/A_austin.jpg" alt="Neo Latina A animation" width="167" height="200"> <img class="item nl1" role="img" src="img/B_uchenna.jpg" alt="Neo Latina B animation" width="167" height="200"> <img class="item nl2" role="img" src="img/C_cristina.jpg" alt="Neo Latina C animation" width="167" height="200"> <img class="item nl3" role="img" src="img/D_austin.jpg" alt="Neo Latina D animation" width="167" height="200"> <img class="item nl4" role="img" src="img/E_rodrigo.jpg" alt="Neo Latina E animation" width="167" height="200"> <img class="item nl6" role="img" src="img/G_rodrigo.jpg" alt="Neo Latina G animation" width="167" height="200"> <img class="item nl7" role="img" src="img/H_uchenna.jpg" alt="Neo Latina H animation" width="167" height="200"> <img class="item nl8" role="img" src="img/I_uchenna.jpg" alt="Neo Latina I animation" width="167" height="200"> <img class="item nl10" role="img" src="img/K_shayna.jpg" alt="Neo Latina K animation" width="167" height="200"> <img class="item nl11" role="img" src="img/L_uchenna.jpg" alt="Neo Latina L animation" width="167" height="200"> <img class="item nl12" role="img" src="img/M_rodrigo.jpg" alt="Neo Latina M animation" width="167" height="200"> <img class="item nl13" role="img" src="img/N_austin.jpg" alt="Neo Latina N animation" width="167" height="200"> <img class="item nl14" role="img" src="img/O_shayna.jpg" alt="Neo Latina O animation" width="167" height="200"> <img class="item nl15" role="img" src="img/P_cristina.jpg" alt="Neo Latina P animation" width="167" height="200"> <img class="item nl18" role="img" src="img/S_rodrigo.jpg" alt="Neo Latina S animation" width="167" height="200"> <img class="item nl19" role="img" src="img/T_rodrigo.jpg" alt="Neo Latina T animation" width="167" height="200"> <img class="item nl20" role="img" src="img/U_uchenna.jpg" alt="Neo Latina U animation" width="167" height="200"> <img class="item nl21" role="img" src="img/V_uchenna.jpg" alt="Neo Latina V animation" width="167" height="200"> <img class="item nl22" role="img" src="img/W_uchenna.jpg" alt="Neo Latina W animation" width="167" height="200"> <img class="item nl24" role="img" src="img/Y_cristina.jpg" alt="Neo Latina Y animation" width="167" height="200"> <img class="item nl25" role="img" src="img/Z_kay.jpg" alt="Neo Latina Z animation" width="167" height="200"> <img class="item nl26" role="img" src="img/AE_austin.jpg" alt="Neo Latina 0 animation" width="167" height="200"> <img class="item nl27" role="img" src="img/PoundSign_cristina.jpg" alt="Neo Latina 1 animation" width="167" height="200"> <img class="item nl28" role="img" src="img/Ampersand_uchenna.jpg" alt="Neo Latina 2 animation" width="167" height="200"> <img class="item nl29" role="img" src="img/PlusSign_shayna.jpg" alt="Neo Latina 3 animation" width="167" height="200"> </section> <section class="cred"> <div> <h2 role="heading" aria-level="2">Credits</h2> <p>Each set of Animated Typeface is completed by an individual class of students as part of the <a role="link" href="http://vfs.edu/programs/digital-design" target="_blank" rel="noopener noreferrer">VFS Digital Design</a> program. Each student is credited below with the animations they created. Each set showcases a type created by a type designer from <a role="link" href="https://www.theleagueofmoveabletype.com" target="_blank" rel="noopener noreferrer">The League of Movable Type</a>, who are also credited below.</p></div><p>Type Design - <a role="link" href="https://defharo.com" target="_blank" rel="noopener noreferrer">deFharo</a></p><article class="set"> <p>Ƀ / H / I / L / U / V / W - Uchenna Obi</p><p>E / G / M / S / T- Rodrigo Giorgetti</p><p>A / D / N / AE - Austin Day</p><p>C / P / Y / # - Cristina Rendon</p><p>K / O / + - Shayna Nunuez</p><p>Z - Kay Nguyen</p></article> </section> <footer class="clearfix"> <div class="copy">© 2019 VFS Digital Design. All Rights Reserved <span>|</span> <div class="skip"><a role="link" href="#content">Back to the top of the page</a></div><a href="#">↑ Top</a></div><div class="social"> <a role="link" aria-label="facebook icon" href="https://www.facebook.com/VFSDigitalDesign" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook-official"></i></a> <a role="link" aria-label="youtube icon" href="https://www.youtube.com/playlist?list=PL0BB77C52358480F9" target="_blank" rel="noopener noreferrer"><i class="fa fa-youtube-square"></i></a> </div></footer> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>$(document).bind("mobileinit", function(){$.extend($.mobile ,{autoInitializePage: false})}); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> <script async="" src="js/dd45-responsive-animGif.js"></script> <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-61360002-1', 'auto'); ga('send', 'pageview'); </script> </body></html>

CSS