typing effect using html and css | tips & tricks | animation | web design and development tutorials

Pubblicato il: 16 novembre 2019
sul canale di: Web Learners Hub

In this tutorial, We are going to learn how to create a typewriting effect using only html and css,
Step 1, We want to create a html file ( index.html ). then create a css file (style.css).
Step 2, write a html, link the style.css file in the index.html file, and in the body tag, create a h1 tag and inside the html tag, write a text what you want, i put the text "Web Learners Hub.".this text is 17 characters length.
Step 3, write a css, in the style.css file, first we put the style for body tag, in this video, i want the body as flex container, so i put the display:flex, and the contents inside the body tag are to aligned center horizontally and vertically, so jusitfy-content:center, and align-items : center, i want body to the device's height so height:100vh, vh is the unit based on the device's height.

step 4, Styling the h1 tag, first we want the text inside the h1 should be monospace , so, font-family:monospace, and font-size:80px, then border-right is for cursor that is going to be act as a cursor with blinking animation ( border:2px solid transparent ).

Step 5, create two keyframes, typing and blink.
typing is for typewriting effect blink is for cursor blinking.

in the typing animation,
0% to 20%, width:0; because, some time nothing happens
80% to 100%, width:17ch, because, after the typing some time nothing happens,
in between the 20% and 80%, the typing happens.

in the blinking animation,
100% border-color:#fff, default color is set to 0% automatically. the default color is transparent.

step 6, assign the animations to the h1 tag,
animation : typing, duration 4s, timing function steps(17) ( animation works as 17 steps because there are 17 characters ) ease (Default), alternate is for after complete the animation reversing the animation back.

thanks for watching!

Follow as on Facebook, / weblearnershub

In questa pagina del sito puoi guardare il video online typing effect using html and css | tips & tricks | animation | web design and development tutorials della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Web Learners Hub 16 novembre 2019, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 55 volte e gli è piaciuto 2 spettatori. Buona visione!

874,496

8.2K