Create a Fun Cursor-Following Effect with Pure CSS

Create a Fun Cursor-Following Effect with Pure CSS

Kevin Powell via YouTube Direct link

00:00 - Introduction

1 of 10

1 of 10

00:00 - Introduction

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Create a Fun Cursor-Following Effect with Pure CSS

Automatically move to the next video in the Classroom when playback concludes

  1. 1 00:00 - Introduction
  2. 2 00:37 - Basic setup
  3. 3 02:18 - Adding the pseudo-element for the “bubble”
  4. 4 03:30 - My first failed attempt at using anchor positioning
  5. 5 08:12 - How you can animate the anchor position between elements
  6. 6 10:20 - Be careful with position relative and anchor positioning
  7. 7 13:40 - Using calc with anchor
  8. 8 16:50 - Fixing the stacking of elements
  9. 9 17:45 - Improving the animation and shapes
  10. 10 20:16 - The cutout effect

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.