Skip to content

Commit 4e1ecb9

Browse files
author
Karim Khan
committed
PCSS3AB V1.0
0 parents  commit 4e1ecb9

File tree

9 files changed

+5917
-0
lines changed

9 files changed

+5917
-0
lines changed

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Karim Khan
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
# pure-css-animated-border
2+
3+
A pure css3 animated border which supports all moden browser.
4+
5+
## Demo Link
6+
7+
See the [online demo](http://localhost/project/pure-css-animated-border/).
8+
9+
## 1,2 Line Animated Boder Examples
10+
11+
```
12+
13+
<a href="ui-box top-leftToRight">
14+
Animated Hyperlink Border
15+
</a>
16+
17+
<div class="ui-box bottom-rightToLeft">
18+
Animated Div Border
19+
</a>
20+
21+
<button class="ui-box left-bottomToTop">
22+
Animated Button Border
23+
</button>
24+
25+
<p class="ui-box right-topToBottom">
26+
Animated Paragraph Border
27+
</p>
28+
29+
```
30+
31+
```
32+
Modify border style, color, width and easing
33+
<style>
34+
//top border
35+
.top-leftToRight:before{
36+
border-top: 1px solid Tomato;
37+
transition-timing-function: linear;
38+
}
39+
40+
//bottom border
41+
.bottom-rightToLeft:after{
42+
border-bottom: 1px solid DodgerBlue;
43+
transition-timing-function: ease-in;
44+
}
45+
46+
//left border
47+
.left-bottomToTop:before{
48+
border-left: 1px solid smokeWhite;
49+
transition-timing-function: ease-out;
50+
}
51+
52+
//right border
53+
.right-topToBottom:after{
54+
border-right: 1px solid MediumSeaGreen;
55+
transition-timing-function: ease-in-out;
56+
}
57+
</style>
58+
```
59+
60+
61+
## 4 Line Animated Boder Example
62+
```
63+
<a href="ui-box top-leftStart">
64+
<span class='ui-border-element'>
65+
Animated Hyperlink
66+
</span>
67+
</a>
68+
```
69+
70+
```
71+
Modify border style, color, width and easing
72+
<style>
73+
//top border
74+
.top-leftStart:before{
75+
border-top: 1px solid Tomato;
76+
transition-timing-function: linear;
77+
}
78+
79+
//bottom border
80+
.top-leftStart:after{
81+
border-bottom: 1px solid DodgerBlue;
82+
transition-timing-function: ease-in;
83+
}
84+
85+
//left border
86+
.top-leftStart .ui-border-element:before{
87+
border-left: 1px solid smokeWhite;
88+
transition-timing-function: ease-out;
89+
}
90+
91+
//right border
92+
.top-leftStart .ui-border-element:after{
93+
border-right: 1px solid MediumSeaGreen;
94+
transition-timing-function: ease-in-out;
95+
}
96+
</style>
97+
```
98+
99+
## Animated Border Class Name
100+
101+
| Class Name | Use Span |
102+
| ---------------- |-------------|
103+
| .ui-box .topBottom-leftRightCorner | ```<span class='ui-border-element'> Your Content... </span>``` |
104+
| .ui-box .topBottom-rightLeftCorner | ```<span class='ui-border-element'> Your Content... </span>``` |
105+
| .ui-box .forwardBorderTrain | ```<span class='ui-border-element'> Your Content... </span>``` |
106+
| .ui-box .backwardBorderTrain | ```<span class='ui-border-element'> Your Content... </span>``` |
107+
| .ui-box .border-inOutSpread | ```<span class='ui-border-element'> Your Content... </span>``` |
108+
| .ui-box .slideOpposite | ```<span class='ui-border-element'> Your Content... </span>``` |
109+
| .ui-box .top-leftToRight | |
110+
| .ui-box .right-topToBottom | |
111+
| .ui-box .bottom-rightToLeft | |
112+
| .ui-box .left-bottomToTop | |
113+
| .ui-box .top-rightToLeft | |
114+
| .ui-box .right-bottomToTop | |
115+
| .ui-box .bottom-leftToRight | |
116+
| .ui-box .left-topToBottom | |
117+
| .ui-box .top-inOutSpread | |
118+
| .ui-box .right-inOutSpread | |
119+
| .ui-box .bottom-inOutSpread | |
120+
| .ui-box .left-inOutSpread | |
121+
| .ui-box .top-slideOpposite | |
122+
| .ui-box .right-slideOpposite | |
123+
| .ui-box .bottom-slideOpposite | |
124+
| .ui-box .left-slideOpposite | |
125+
| .ui-box .top-leftStart | ```<span class='ui-border-element'> Your Content... </span>``` |
126+
| .ui-box .top-rightStart | ```<span class='ui-border-element'> Your Content... </span>``` |
127+
| .ui-box .bottom-rightStart | ```<span class='ui-border-element'> Your Content... </span>``` |
128+
| .ui-box .bottom-leftStart | ```<span class='ui-border-element'> Your Content... </span>``` |
129+
| .ui-box .top-leftStart-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
130+
| .ui-box .top-rightStart-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
131+
| .ui-box .bottom-rightStart-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
132+
| .ui-box .bottom-leftStart-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
133+
| .ui-box .top-leftStart-burst | ```<span class='ui-border-element'> Your Content... </span>``` |
134+
| .ui-box .top-rightStart-burst | ```<span class='ui-border-element'> Your Content... </span>``` |
135+
| .ui-box .bottom-rightStart-burst | ```<span class='ui-border-element'> Your Content... </span>``` |
136+
| .ui-box .bottom-leftStart-burst | ```<span class='ui-border-element'> Your Content... </span>``` |
137+
| .ui-box .top-leftStart-burst-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
138+
| .ui-box .top-rightStart-burst-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
139+
| .ui-box .bottom-rightStart-burst-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
140+
| .ui-box .bottom-leftStart-burst-backward | ```<span class='ui-border-element'> Your Content... </span>``` |
141+
| .ui-box .top-stay | ```<span class='ui-border-element'> Your Content... </span>``` |
142+
| .ui-box .right-stay | ```<span class='ui-border-element'> Your Content... </span>``` |
143+
| .ui-box .bottom-stay | ```<span class='ui-border-element'> Your Content... </span>``` |
144+
| .ui-box .left-stay | ```<span class='ui-border-element'> Your Content... </span>``` |
145+
146+

0 commit comments

Comments
 (0)