Run Around List Hover Animation | CSS Border Radius & Before/After | HTML/CSS/SASS Tutorial | #10

Опубликовано: 16 Октябрь 2024
на канале: TheBingeCoder
67
2

In this video we are going to use css key frames animation to create a 5 step running circle animation using css pseudo classes i.e :before & :after . We are going to create 5 steps process to animate our circle to make a hover effect for individual li.

We will also be using css transition to create transparency or opacity or fade effect on hover on list items. This is a simple effect and can be used on different type of list and can be incorporated in various designs on website and web pages.

These effects are subtle and simple and can be used in various location.

You can find the source code for this project below:

https://github.com/thebingecoder/Slid...

Package includes all html and complete SASS & CSS code. Feel free to use it as you see fit.

!!!! If you liked the video subscribe & hit the like button !!!!