https://github.com/faisal-din/css-border-animation

https://github.com/faisal-din/css-border-animation

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/faisal-din/css-border-animation
• Owner: faisal-din
• Created: 2024-09-29T08:29:28.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-10-15T19:15:23.000Z (9 months ago)
• Last Synced: 2024-12-30T20:21:57.580Z (7 months ago)
• Language: CSS
• Size: 115 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Border Animation

This project demonstrates a beautiful border animation effect using pure CSS and the `@property` rule, along with `conic-gradient` and keyframe animations. The animation continuously rotates a gradient around the border of a card element.

## Result

The result of the border animation can be viewed by opening the `index.html` file in your browser.

![CSS Border Animation Preview](animation-preview.png)

## Features

- Dynamic animated border using `conic-gradient`.

- Smooth infinite rotation with CSS keyframes.

- Blurred outer glow effect for a modern look.