code-fx / Pure Css3 Animated Border
Licence: mit
Pure CSS3 animated border for all html element.
Stars: ✭ 63
Projects that are alternatives of or similar to Pure Css3 Animated Border
hexa
Awesome Css Animation. The documentation =>
Stars: ✭ 32 (-49.21%)
Mutual labels: css3, css-animations, html-css
Theme Ad
🔨 Art design theme for write and show.
Stars: ✭ 262 (+315.87%)
Mutual labels: ui-design, html5, css3
Flexy
Flexy is minimal CSS framework made with Flex
Stars: ✭ 114 (+80.95%)
Mutual labels: html5, css3, html-css
Responsive Grid Of Hexagons
CSS responsive grid of hexagons
Stars: ✭ 481 (+663.49%)
Mutual labels: html5, css3, html-css
Lofi Player
🎧 A Lofi Player built with HTML, CSS and Javascript using Parcel as Module Bundler https://lakscastro.github.io/lofi-player
Stars: ✭ 38 (-39.68%)
Mutual labels: html5, css3
Devgonga
Devgonga é uma startup com foco em criação de sites e desenvolvimento de sistemas web, moldada para atender a pequenas e médias empresas ao redor de angola. https://devgonga.github.io/devgonga/
Stars: ✭ 41 (-34.92%)
Mutual labels: ui-design, html5
Components
Example Components (Built with Tonic)
Stars: ✭ 42 (-33.33%)
Mutual labels: ui-design, ui-components
H5ui
Lightweight, elegant open source mobile UI style library.
Stars: ✭ 44 (-30.16%)
Mutual labels: html5, css3
Swifthuecolorpicker
iOS HUE color picker
Stars: ✭ 44 (-30.16%)
Mutual labels: ui-design, ui-components
Grav Theme Landio
Land.io is a carefully crafted landing page UI kit and landing page template built on Bootstrap 4, designed by Peter Finlan and developed by Taty Grassini.
Stars: ✭ 28 (-55.56%)
Mutual labels: html5, css3
Awesome Web Components
🤖 Awesome web components and snippets for every Front-End Developer
Stars: ✭ 28 (-55.56%)
Mutual labels: html5, css3
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+52415.87%)
Mutual labels: ui-design, ui-components
Gomponents
Declarative view components in Go, that can render to HTML5.
Stars: ✭ 49 (-22.22%)
Mutual labels: ui-components, html5
Frontend Mentor Challenge
Here you will find all the challenges that we took from frontend-mentor.
Stars: ✭ 47 (-25.4%)
Mutual labels: html5, css3
Sharebook Frontend
Projeto frontend de código livre para o app Sharebook.
Stars: ✭ 59 (-6.35%)
Mutual labels: html5, css3
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 Codesponsor1,2 Line Animated Boder Examples
<a href="ui-box top-leftToRight">
Animated Hyperlink Border
</a>
<div class="ui-box bottom-rightToLeft">
Animated Div Border
</a>
<button class="ui-box left-bottomToTop">
Animated Button Border
</button>
<p class="ui-box right-topToBottom">
Animated Paragraph Border
</p>
Modify border style, color, width and easing
<style>
//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;
}
</style>
4 Line Animated Boder Example
<a href="ui-box top-leftStart">
<span class='ui-border-element'>
Animated Hyperlink
</span>
</a>
Modify border style, color, width and easing
<style>
//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;
}
</style>
Animated Border Class Name
Class Name | Use Span |
---|---|
.ui-box .topBottom-leftRightCorner | <span class='ui-border-element'> Your Content... </span> |
.ui-box .topBottom-rightLeftCorner | <span class='ui-border-element'> Your Content... </span> |
.ui-box .forwardBorderTrain | <span class='ui-border-element'> Your Content... </span> |
.ui-box .backwardBorderTrain | <span class='ui-border-element'> Your Content... </span> |
.ui-box .border-inOutSpread | <span class='ui-border-element'> Your Content... </span> |
.ui-box .slideOpposite | <span class='ui-border-element'> Your Content... </span> |
.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 | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-rightStart | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-rightStart | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-leftStart | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-leftStart-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-rightStart-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-rightStart-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-leftStart-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-leftStart-burst | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-rightStart-burst | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-rightStart-burst | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-leftStart-burst | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-leftStart-burst-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-rightStart-burst-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-rightStart-burst-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-leftStart-burst-backward | <span class='ui-border-element'> Your Content... </span> |
.ui-box .top-stay | <span class='ui-border-element'> Your Content... </span> |
.ui-box .right-stay | <span class='ui-border-element'> Your Content... </span> |
.ui-box .bottom-stay | <span class='ui-border-element'> Your Content... </span> |
.ui-box .left-stay | <span class='ui-border-element'> Your Content... </span> |
Donate Link
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].