Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Last synced: 8 days ago
JSON representation

Host: GitHub
URL: https://github.com/faisal-din/css-border-animation
Owner: faisal-din
Created: 2024-09-29T08:29:28.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2024-10-15T19:15:23.000Z (about 1 month ago)
Last Synced: 2024-10-17T03:19:41.857Z (30 days 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.