Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/code-fx/pure-css3-animated-border
Pure CSS3 animated border for all html element.
https://github.com/code-fx/pure-css3-animated-border
cdn css css-animations css3 cssbuttons html html-css html5 plugin ui ui-components ui-design widget
Last synced: about 1 month ago
JSON representation
Pure CSS3 animated border for all html element.
- Host: GitHub
- URL: https://github.com/code-fx/pure-css3-animated-border
- Owner: code-fx
- License: mit
- Created: 2017-10-28T18:52:35.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-10-01T13:23:53.000Z (about 4 years ago)
- Last Synced: 2024-05-12T09:20:35.753Z (6 months ago)
- Topics: cdn, css, css-animations, css3, cssbuttons, html, html-css, html5, plugin, ui, ui-components, ui-design, widget
- Language: CSS
- Homepage: https://code-fx.github.io/Pure-CSS3-Animated-Border/
- Size: 74.2 KB
- Stars: 78
- Watchers: 4
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://code-fx.github.io/Pure-CSS3-Animated-Border/).
## 1,2 Line Animated Boder Examples
```
Animated Div Border
Animated Button Border
Animated Paragraph Border
```
```
Modify border style, color, width and easing
//top border
.top-leftToRight:before{
border-top: 1px solid Tomato;
transition-timing-function: linear;
}
//bottom border
.bottom-rightToLeft:after{
border-bottom: 1px solid DodgerBlue;
transition-timing-function: ease-in;
}
//left border
.left-bottomToTop:before{
border-left: 1px solid smokeWhite;
transition-timing-function: ease-out;
}
//right border
.right-topToBottom:after{
border-right: 1px solid MediumSeaGreen;
transition-timing-function: ease-in-out;
}
```
## 4 Line Animated Boder Example
```
Animated Hyperlink
```
```
Modify border style, color, width and easing
//top border
.top-leftStart:before{
border-top: 1px solid Tomato;
transition-timing-function: linear;
}
//bottom border
.top-leftStart:after{
border-bottom: 1px solid DodgerBlue;
transition-timing-function: ease-in;
}
//left border
.top-leftStart .ui-border-element:before{
border-left: 1px solid smokeWhite;
transition-timing-function: ease-out;
}
//right border
.top-leftStart .ui-border-element:after{
border-right: 1px solid MediumSeaGreen;
transition-timing-function: ease-in-out;
}
```
## 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](https://www.paypal.me/codefx).