Ghost Text Animation can be used to give your website a spooky heading or sub-heading, this effect can be easily created using some simple HTML and CSS.
HTML Code: In this section we have a ul tag which consists of some li tags displaying some text.
CSS Code: In this section we design the ul element using some basic CSS properties and then in order to create the ghost animation first we will use the filter property which is used to give some visual effects to the respective element and then use the blur() function to provide a blur effect to the text, Further we will use the nth-child() Selector to provide some transmition-delay to the text.
Final Code: It is the combination of the above two code sections.
- Text Animation with changing the color of the text using HTML & CSS
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to Create Text Color Animation using HTML and CSS ?
- How to prevent dragging of ghost image ?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to create text-fill animation using CSS ?
- Rubber Band Text animation using HTML and CSS
- How to create long shadow of text without using text-shadow in HTML and CSS ?
- How to create X and Y axis flip animation using HTML and CSS ?
- CSS | Animation to Change the Hover State of a Button/Image
- How to Create Gradient Background Animation using HTML and CSS ?
- How to Create a Dot loading Animation using HTML and CSS?
- How to spin text on mouse hover using HTML and CSS?
- How to rotate a text 360 degrees on hover using HTML and CSS?
- How to Skew Text on Hover using HTML and CSS?
- Shrink Text on Hover using HTML and CSS
- How to Shake Text on hover using HTML and CSS?
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.