pure-css-animated-border

A pure css3 animated border which supports all moden browser.

CDN Link

https://cdn.jsdelivr.net/gh/code-fx/[email protected]/css/animated-border/animated-border.min.css

NPM

npm i pure-css3-animated-border

Demo Link

See the online demo.

Sponsered By Codesponsor

1,2 Line Animated Boder Examples

Animated Hyperlink Border

Animated Div Border

Animated Paragraph Border



  Animated Hyperlink Border



   
    
  Animated Div Border





  Animated Paragraph Border

Modify border style, color, width and easing

4 Line Animated Boder Example

Animated Hyperlink ">


  
    Animated Hyperlink

Modify border style, color, width and easing

Animated Border Class Name

Class Name	Use Span
.ui-box .topBottom-leftRightCorner	`Your Content...`
.ui-box .topBottom-rightLeftCorner	`Your Content...`
.ui-box .forwardBorderTrain	`Your Content...`
.ui-box .backwardBorderTrain	`Your Content...`
.ui-box .border-inOutSpread	`Your Content...`
.ui-box .slideOpposite	`Your Content...`
.ui-box .top-leftToRight
.ui-box .right-topToBottom
.ui-box .bottom-rightToLeft
.ui-box .left-bottomToTop
.ui-box .top-rightToLeft
.ui-box .right-bottomToTop
.ui-box .bottom-leftToRight
.ui-box .left-topToBottom
.ui-box .top-inOutSpread
.ui-box .right-inOutSpread
.ui-box .bottom-inOutSpread
.ui-box .left-inOutSpread
.ui-box .top-slideOpposite
.ui-box .right-slideOpposite
.ui-box .bottom-slideOpposite
.ui-box .left-slideOpposite
.ui-box .top-leftStart	`Your Content...`
.ui-box .top-rightStart	`Your Content...`
.ui-box .bottom-rightStart	`Your Content...`
.ui-box .bottom-leftStart	`Your Content...`
.ui-box .top-leftStart-backward	`Your Content...`
.ui-box .top-rightStart-backward	`Your Content...`
.ui-box .bottom-rightStart-backward	`Your Content...`
.ui-box .bottom-leftStart-backward	`Your Content...`
.ui-box .top-leftStart-burst	`Your Content...`
.ui-box .top-rightStart-burst	`Your Content...`
.ui-box .bottom-rightStart-burst	`Your Content...`
.ui-box .bottom-leftStart-burst	`Your Content...`
.ui-box .top-leftStart-burst-backward	`Your Content...`
.ui-box .top-rightStart-burst-backward	`Your Content...`
.ui-box .bottom-rightStart-burst-backward	`Your Content...`
.ui-box .bottom-leftStart-burst-backward	`Your Content...`
.ui-box .top-stay	`Your Content...`
.ui-box .right-stay	`Your Content...`
.ui-box .bottom-stay	`Your Content...`
.ui-box .left-stay	`Your Content...`

Donate Link

Donate Now.

Github

https://github.com/code-fx/Pure-CSS3-Animated-Border

A pure css3 animated border which supports all moden browser

pure-css-animated-border

CDN Link

NPM

Demo Link

1,2 Line Animated Boder Examples

4 Line Animated Boder Example

Animated Border Class Name

Donate Link

Github

Popular Tag

Related

Canta is a flat Material Design theme for GTK 3, GTK 2 and Gnome-Shell which supports GTK 3 and GTK 2 based desktop environments like Gnome, Unity, Budgie, Pantheon, XFCE, Mate, etc.

This is the first Microverse Capstone Project which was meant to summarise all the contents learned through from the first module. The project was about an International Summit which mimicked the design of Cindy Shin in Behance.

Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library

eFrolic | CSS framework which without using JavaScript is interactive and animated.

eFrolicss - CSS framework which without using JavaScript is interactive and animated

A Simple Theme Based On The New Windows 11! With Rounded Edges To Every Element Matching In Colour With Dark/Light Mode Variations & Border Radius' To Go Along With The Overall Theme, Enjoy! :)

This is a (pretty broken, but mostly functional) organic-shaped jigsaw generator with custom border support

Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera

Animated background gradients with pure CSS

flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.

Its is a Note-App which is saved in browser

Commandline tool to customize Spotify client. Supports Windows, MacOS and Linux.

🏢 CSS (SCSS) Grid based on CSS grid layout with @supports fallback to flexbox

An Utility CSS only library. It supports css grid and many more useful css properties.

Next-generation CSS grid framework based on flexbox. Provides the same responsive 12 column fluid layout as Bootstrap 3 to most browsers. Even supports IE 6! Simple, fast, and easy.

This is an Everforest theme for Obsidian. It supports both light and dark modes.

A totally, totally, totally no install, no download, no config web based scientific computing platform that actually supports Python

This is my personal Project from module 1, in which I created a Web Page for my former band called "VPN" in which I promote a world tour concert! check it out!

Cross-browser CSS3 animation library

This personal portfolio website is developed using HTML5, CSS3 and JavaScript DOM. The website has contents which are past completed projects in a grid layout on the home page. And have link for the live demo and the source code.