Lord have mercy on Lebanon. If you have anyone in Lebanon check on them. Pray for Lebanon
How to create Text Animation using HTML and CSS

In this project we will make a simple text animation that displays matrix code in the background using Html and Css.

Here is the folder structure.
  • index.html
  • style.css

To download the source code: Click here description

The most important property here is the background-clip.It sets whether an element's background extends underneath its border box, padding box, or content box.

The background-clip is best explained in action, so I've put together a video to show how it works.

Watch the video.
Html code

Place that h1 heading between in the body section.

copy

<h1>oston code</h1>

Css code
copy

/*Removes all the margin and padding on the page*/
*{
	margin:0;
	padding:0;
}


/*Applys styling to the h1 tag*/
h1{
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	font-size: 160px;
	font-weight: 800;
	font-family: sans-serif;
	color:transparent;
	background-image:url('https://media0.giphy.com/media/A06UFEx8jxEwU/200.webp?cid=790b76115cd431c47270576451361399&rid=200.webp');
	background-position: center;
	background-clip:text;
	-webkit-background-clip:text;
}

I now spend most of my day creating the best content I possibly can to give away free. If I have helped you in any way please consider becoming a SUBSCRIBER on my channel.

Related Post(s)

» Learn how to create responsive images with CSS

» Learn how to create a custom scrollbar with CSS.

» How to use the CSS Negation and Language Selectors.

» How do I wrap text in a pre tag?[SOLVED]

» Learn how to use CSS box shadow property - Source Code

collections_bookmark Category :: Css
date_range Published :: 1 year ago At: 05:41 PM
event_note Detailed Date :: May 09th, 2019
person Writer :: Code

YOU MAY LIKE THESE POSTS

share