If you hover your mouse cursor over one of the colourful blocks in the image above, you’ll see the default mouse pointer for your operating system. When the pointer falls on a link, the before shadow transforms into an after shadow. When the red dot cursor moves, it is followed by a semi-transparent dot that is not visible. This cursor accomplishes the goals of the two previous examples in one. This is completely in line with the mission of PPP, which is to create experiences that incorporate both play and gamification. It’s reminiscent of the classic computer game Snake, but with a more contemporary and humorous twist. Upon entering the site, you will see that the mouse pointer is encircled by spinning lettering that reads “click and drag.” A number of aspects dependent on the design of the cards are displayed as a result of this action.Īs you walk across the website, a sequence of brightly cultured circles will trail after the pointer, drawing your attention. Users are encouraged to check out the goods through the use of spinning text that appears within the circle. When a user hovers their mouse cursor over a product, the backdrop colour changes and the cursor changes to a ballpoint pen in the center of a black circle, representing the object. Holding and dragging the mouse allows users to “draw on the page.” This will make the cursor appear like it’s being painted with brushstrokes for the time being. The backdrop distorts as the user’s pointer moves around the page, growing bigger and darker. This piques the interest of readers to learn more about the subject at hand.

“Discovering” or “uncovering,” as the phrase implies, may be found at the cursor in the screenshot above. On portfolio images, however, the black dot changes to a translucent circle carrying an individual word.

As you can see, the cursor is a small black dot that’s exactly placed on the logo. We’ll include this animation in the typed-out class’s rules and set its animation direction property to infinite to make the cursor disappear and reappear every. Inside our web page, this animation will change the border color of the typed-out element’s border - which is used as a cursor for the typewriter effect - from transparent to orange.

This is where the steps() CSS function comes in. To make this animation reveal our text element letter by letter, or in steps, the way a typewriter would, we need to split the typing animation included by the typed-out class into steps in order for it to look like it’s being typed out.

This is a start, but obviously it’s not what a typewriter effect looks like. So far, our text is revealed, but in a smooth way that doesn’t reveal the text letter by letter. Adding Steps to Achieve a Typewriter Effect

Css cursor animation codepen