Skip to content

Commit e56baa4

Browse files
chenhuiYjchenhuiYj
committed
1.0.0提交
1 parent 72a9d6b commit e56baa4

File tree

10 files changed

+2824
-0
lines changed

10 files changed

+2824
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.idea
2+
node_modules
3+
sass
4+

‎README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,14 @@
11
# ec-css
22
基于css3开发的代码库，包括日常使用的hover过渡效果，动画效果，以及预设动画
3+
4+
## hover过渡，动画效果
5+
引入ec-css-hover.css文件。然后根据，demo-hover.html的效果，进行设置class即可
6+
7+
## 预设动画效果
8+
引入ec-css-animate.css文件。然后根据，demo-animate.html的效果，进行设置class即可
9+
10+
## 使用方法
11+
直接引入.css文件即可。详细栗子可查看demo-hover.html和demo-animate.html
12+
13+
# LICENSE
14+
MIT

‎demo-animate.html

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>demo</title>
6+
<link rel="stylesheet" href="reset.css">
7+
<link rel="stylesheet" href="ec-css-animate.css">
8+
<style>
9+
.big {
10+
width: 500px;
11+
height: 500px;
12+
border: 1px solid #ccc;
13+
margin: 100px auto 0 auto;
14+
}
15+
16+
#demo {
17+
width: 200px;
18+
height: 100px;
19+
margin: 200px auto;
20+
background: #09f;
21+
}
22+
23+
.btn-box {
24+
margin: 0 auto 100px auto;
25+
max-width: 1200px;
26+
font-size: 0;
27+
}
28+
29+
.btn-box a {
30+
font-size: 16px;
31+
display: inline-block;
32+
height: 40px;
33+
line-height: 40px;
34+
padding: 0 6px;
35+
color: #333;
36+
background: #ccc;
37+
margin: 0 0 10px 10px;
38+
}
39+
.btn-box .cur{
40+
background: #09f;
41+
color: #fff;
42+
}
43+
.an-type{
44+
width: 500px;
45+
height: 100px;
46+
margin: 0 auto;
47+
}
48+
.an-type a{
49+
font-size: 16px;
50+
display: inline-block;
51+
height: 40px;
52+
line-height: 40px;
53+
padding: 0 6px;
54+
color: #333;
55+
background: #ccc;
56+
margin: 0 10px 10px 0;
57+
}
58+
.an-type .cur{
59+
background: #09f;
60+
color: #fff;
61+
}
62+
</style>
63+
</head>
64+
<body>
65+
<div class="big">
66+
<div class="" id="demo"></div>
67+
</div>
68+
<div class="an-type">
69+
<a href="javascripr:;" data-class="ec-infinite" id="infinite">无限执行</a>
70+
<a href="javascripr:;" data-class="ec-alternate" id="alternate">反向动画</a>
71+
<a href="javascripr:;" id="stop">停止</a>
72+
</div>
73+
<div class="btn-box">
74+
<a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a>
75+
<a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a>
76+
<a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a>
77+
<a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a>
78+
<a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a>
79+
<a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a>
80+
<a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a>
81+
<a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a>
82+
<a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a>
83+
<br/>
84+
<a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a>
85+
<a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a>
86+
<a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a>
87+
<br/>
88+
<a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a>
89+
<a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a>
90+
<a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a>
91+
<a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a>
92+
<a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a>
93+
<a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a>
94+
<a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a>
95+
<a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a>
96+
<a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a>
97+
<a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a>
98+
<br/>
99+
<a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a>
100+
<a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a>
101+
<a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a>
102+
<a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a>
103+
<a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a>
104+
<a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a>
105+
<a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a>
106+
<a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a>
107+
<a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a>
108+
<a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a>
109+
<br/>
110+
<a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a>
111+
<a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a>
112+
<a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a>
113+
<a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a>
114+
<br/>
115+
<a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a>
116+
<a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a>
117+
<br/>
118+
<a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a>
119+
<a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a>
120+
<a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a>
121+
<a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a>
122+
<a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a>
123+
<a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a>
124+
<a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a>
125+
<a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a>
126+
</div>
127+
</body>
128+
<script src="ec-do.js"></script>
129+
<script type="text/javascript">
130+
window.onload = function () {
131+
var oDivDemo = document.getElementById("demo"),
132+
oDivBox = document.getElementsByClassName("btn-box")[0],
133+
oAan=oDivBox.getElementsByTagName("a"),
134+
oInfinite=document.getElementById("infinite"),_infinite=false,
135+
oAlternate=document.getElementById("alternate"),_alternate=false,
136+
oStop=document.getElementById("stop");
137+
oStop.addEventListener("click",function(){
138+
oDivDemo.className="";
139+
_infinite=false;
140+
_alternate=false;
141+
ecDo.removeClass(oInfinite,"cur");
142+
ecDo.removeClass(oAlternate,"cur");
143+
ecDo.removeClass(oAan,"cur");
144+
})
145+
oInfinite.addEventListener("click",function(){
146+
_infinite=!_infinite;
147+
if(_infinite){
148+
ecDo.addClass(oInfinite,"cur")
149+
ecDo.addClass(oDivDemo,"ec-infinite");
150+
}
151+
else{
152+
ecDo.removeClass(oInfinite,"cur")
153+
ecDo.removeClass(oDivDemo,"ec-infinite");
154+
}
155+
})
156+
oAlternate.addEventListener("click",function(){
157+
_alternate=!_alternate;
158+
if(_alternate){
159+
ecDo.addClass(oAlternate,"cur")
160+
ecDo.addClass(oDivDemo,"ec-alternate");
161+
}
162+
else{
163+
ecDo.removeClass(oAlternate,"cur")
164+
ecDo.removeClass(oDivDemo,"ec-alternate");
165+
}
166+
})
167+
oDivBox.addEventListener("click", function (e) {
168+
var e = e || window.event;
169+
var target = e.target || e.srcElement, _class = "";
170+
if (target.nodeName.toLowerCase() === 'a') {
171+
ecDo.addClass(target,"cur");
172+
ecDo.removeClass(ecDo.siblings(target,"a"),"cur")
173+
_class =target.getAttribute("data-class");
174+
oDivDemo.className = "";
175+
setTimeout(function () {
176+
ecDo.addClass(oDivDemo,_class);
177+
if(_infinite){
178+
ecDo.addClass(oDivDemo,"ec-infinite");
179+
}
180+
else{
181+
ecDo.removeClass(oDivDemo,"ec-infinite");
182+
}
183+
if(_alternate){
184+
ecDo.addClass(oDivDemo,"ec-alternate");
185+
}
186+
else{
187+
ecDo.removeClass(oDivDemo,"ec-alternate");
188+
}
189+
}, 50)
190+
}
191+
})
192+
}
193+
</script>
194+
</html>

‎demo-hover.html

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>demo</title>
6+
<link rel="stylesheet" href="reset.css">
7+
<link rel="stylesheet" href="ec-css-hover.css">
8+
<style>
9+
.hover-box{
10+
max-width: 1200px;
11+
margin: 20px auto;
12+
}
13+
.hover-box p{
14+
line-height: 50px;
15+
}
16+
.hover-box span{
17+
cursor: pointer;
18+
height: 40px;
19+
line-height: 40px;
20+
text-align: center;
21+
display: inline-block;
22+
color: #333;
23+
background: #ccc;
24+
min-width: 80px;
25+
padding: 0 10px;
26+
margin: 10px;
27+
}
28+
29+
</style>
30+
</head>
31+
<body>
32+
<div class="hover-box">
33+
<p>几个组合效果</p>
34+
<span class="ech-arrow-b-move ech-shadow">arrow-b</span>
35+
<span class="ech-radius ech-shadow">radius</span>
36+
<span class="ech-fade-m-out ech-shadow">fade-m-out</span>
37+
</div>
38+
<div class="hover-box">
39+
<p>鼠标效果 简单动画(hover effect)</p>
40+
<span class="ech-rectangle">rectangle</span>
41+
<span class="ech-radius">radius</span>
42+
<span class="ech-border">border</span>
43+
<span class="ech-big">big</span>
44+
<span class="ech-small">small</span>
45+
<span class="ech-border-in">border-in</span>
46+
<span class="ech-shadow">shadow</span>
47+
<span class="ech-shadow-in">shadow-in</span>
48+
<span class="ech-shadow-write">shadow-write</span>
49+
<span class="ech-shadow-big">shadow-big</span>
50+
<span class="ech-fade-out">fade-out</span>
51+
<span class="ech-fade-in">fade-in</span>
52+
<span class="ech-t">up</span>
53+
<span class="ech-b">bottom</span>
54+
<span class="ech-l">left</span>
55+
<span class="ech-r">right</span>
56+
<span class="ech-grow-rotate-l">grow-rotate-l</span>
57+
<span class="ech-grow-rotate-r">grow-rotate-r</span>
58+
<span class="ech-rotate5">rotate5</span>
59+
<span class="ech-rotate15">rotate15</span>
60+
<span class="ech-rotate30">rotate30</span>
61+
<span class="ech-rotate60">rotate60</span>
62+
<span class="ech-rotate90">rotate90</span>
63+
<span class="ech-rotate180">rotate180</span>
64+
<span class="ech-rotate360">rotate360</span>
65+
<span class="ech-rotate-5">rotate-5</span>
66+
<span class="ech-rotate-15">rotate-15</span>
67+
<span class="ech-rotate-30">rotate-30</span>
68+
<span class="ech-rotate-60">rotate-60</span>
69+
<span class="ech-rotate-90">rotate-90</span>
70+
<span class="ech-rotate-180">rotate-180</span>
71+
<span class="ech-skew-l">skew-l</span>
72+
<span class="ech-skew-r">skew-r</span>
73+
<span class="ech-skew-l-t">skew-l-t</span>
74+
<span class="ech-skew-r-t">skew-r-t</span>
75+
<span class="ech-skew-l-b">skew-l-b</span>
76+
<span class="ech-skew-r-b">skew-r-b</span>
77+
</div>
78+
<div class="hover-box">
79+
<p>鼠标颜色效果(主要利用:after :before实现)</p>
80+
<span class="ech-fade">fade</span>
81+
<span class="ech-fade-t">fade-t</span>
82+
<span class="ech-fade-b">fade-b</span>
83+
<span class="ech-fade-l">fade-l</span>
84+
<span class="ech-fade-r">fade-r</span>
85+
<span class="ech-bounce-t">bounce-t</span>
86+
<span class="ech-bounce-b">bounce-b</span>
87+
<span class="ech-bounce-l">bounce-l</span>
88+
<span class="ech-bounce-r">bounce-r</span>
89+
<span class="ech-fade-c-out">fade-c-out</span>
90+
<span class="ech-fade-c-in">fade-c-in</span>
91+
<span class="ech-fade-m-out">fade-m-out</span>
92+
<span class="ech-fade-m-in">fade-m-in</span>
93+
<span class="ech-overline-l">overline-l</span>
94+
<span class="ech-overline-r">overline-r</span>
95+
<span class="ech-underline-l">underline-l</span>
96+
<span class="ech-underline-r">underline-r</span>
97+
<span class="ech-underline-c">underline-c</span>
98+
<span class="ech-underline-c-out">underline-c-out</span>
99+
<span class="ech-overline-c">overline-c</span>
100+
<span class="ech-overline-c-out">overline-c-out</span>
101+
</div>
102+
<div class="hover-box">
103+
<p>鼠标效果 较复杂动画(hover effect)</p>
104+
<span class="ech-shake-time">shake-time</span>
105+
<span class="ech-bounce">bounce</span>
106+
<span class="ech-wobble">wobble</span>
107+
<span class="ech-swing">swing</span>
108+
<span class="ech-shake">shake</span>
109+
<span class="ech-flash">flash</span>
110+
<span class="ech-wobble-c">wobble-c</span>
111+
<span class="ech-wobble-t">wobble-t</span>
112+
<span class="ech-wobble-b">wobble-b</span>
113+
</div>
114+
<div class="hover-box">
115+
<p>鼠标效果 较复杂动画-无限执行(hover effect)</p>
116+
<span class="ech-pulse">pulse</span>
117+
<span class="ech-pulse-shrink">pulse-shrink</span>
118+
<span class="ech-swing ech-infinite">swing-infinite</span>
119+
<span class="ech-shake-time ech-infinite">shake-time-infinite</span>
120+
<span class="ech-shake ech-infinite">shake-infinite</span>
121+
<span class="ech-flash ech-infinite">flash-infinite</span>
122+
</div>
123+
<div class="hover-box">
124+
<p>鼠标效果 箭头效果</p>
125+
<span class="ech-arrow-l">arrow-l</span>
126+
<span class="ech-arrow-r">arrow-r</span>
127+
<span class="ech-arrow-t">arrow-t</span>
128+
<span class="ech-arrow-b">arrow-b</span>
129+
<span class="ech-arrow-l-move">arrow-l</span>
130+
<span class="ech-arrow-r-move">arrow-r</span>
131+
<span class="ech-arrow-t-move">arrow-t</span>
132+
<span class="ech-arrow-b-move">arrow-b</span>
133+
</div>
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)