It is possible to utilize a CSS background animation to help your site stand out from the crowd, emphasize your logo, or just to make it seem amazing. Whenever you hover your mouse cursor over the YouTube symbol, spinning text will surround the circular pointer, for example. Hovering over one of the elements will cause the second circle to turn into a block of text. A spotlight appears to be shining on the cursor when it is shown against the dark background of the web page.Ī cursor consisting of two circles may be seen in the Pen to the right. The cursor is transformed into a white hand pointer with a white shadow. When the cursor is over one of the words, the white circle enlarges and the word is highlighted. The cursor starts off as a white circle in the illustration above. As soon as this happens, the cursor becomes animated, beginning as a “X” icon and rotating until it becomes a white plus icon in a circle. 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.

Css cursor animation codepen