typing effect using html and css | tips & tricks | animation | web design and development tutorials
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
Auf dieser Seite können Sie das Online-Video typing effect using html and css | tips & tricks | animation | web design and development tutorials mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Web Learners Hub 16 November 2019 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 55 Mal angesehen und es wurde von 2 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
