Skip to content

Commit a50b56c

Browse files
zhouxiaotianzhouxiaotian
committed
忽略文件
1 parent fd5ffbd commit a50b56c

83 files changed

Lines changed: 4354 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎20160625_移动端第二天/1、animation.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS3动画</title>
6+
<link type="text/css" rel="stylesheet" href="css/reset.min.css"/>
7+
<style type="text/css">
8+
html, body {
9+
overflow: hidden;
10+
}
11+
12+
.box {
13+
position: absolute;
14+
top: 0;
15+
left: 0;
16+
right: 0;
17+
bottom: 0;
18+
margin: auto;
19+
20+
width: 200px;
21+
height: 200px;
22+
23+
/*--CSS3中的发射性背景颜色渐变--*/
24+
background: #6699cc;
25+
background: -webkit-radial-gradient(at right top, orange, red, green);
26+
background: -moz-radial-gradient(at right top, orange, red, green);
27+
background: -ms-radial-gradient(at right top, orange, red, green);
28+
background: -o-radial-gradient(at right top, orange, red, green);
29+
background: radial-gradient(at right top, orange, red, green);
30+
31+
/*--CSS3过渡动画:第一步给当前元素设置一个过渡的效果--*/
32+
/*-webkit-transition: all 1s linear 0s;
33+
-moz-transition: all 1s linear 0s;
34+
-o-transition: all 1s linear 0s;
35+
transition: all 1s linear 0s;*/
36+
}
37+
38+
/*--CSS3过渡动画:第二步触发元素的样式发生改变--*/
39+
/*.box:hover {
40+
-webkit-transform: scale(1.2);
41+
-moz-transform: scale(1.2);
42+
-o-transform: scale(1.2);
43+
-ms-transform: scale(1.2);
44+
transform: scale(1.2);
45+
}*/
46+
47+
/*--CSS3帧动画--*/
48+
/*--第一步:设置运动的轨迹/设置关键帧--*/
49+
/*@-webkit-keyframes myFirstMove {
50+
from {
51+
-webkit-transform: translate(0, 0);
52+
transform: translate(0, 0);
53+
}
54+
to {
55+
-webkit-transform: translate(-100px, 100px);
56+
transform: translate(-100px, 100px);
57+
}
58+
}
59+
60+
@keyframes myFirstMove {
61+
from {
62+
-webkit-transform: translate(0, 0);
63+
transform: translate(0, 0);
64+
}
65+
to {
66+
-webkit-transform: translate(-100px, 100px);
67+
transform: translate(-100px, 100px);
68+
}
69+
}*/
70+
71+
/*--第二步:触发动画执行--*/
72+
/*.box {
73+
-webkit-animation-name: myFirstMove;
74+
animation-name: myFirstMove;
75+
76+
-webkit-animation-duration: .5s;
77+
animation-duration: .5s;
78+
79+
-webkit-animation-timing-function: linear;
80+
animation-timing-function: linear;
81+
82+
-webkit-animation-delay: 0s;
83+
animation-delay: 0s;
84+
85+
/!*--当前动画运动的次数:infinite代表无限次运动--*!/
86+
-webkit-animation-iteration-count: 1;
87+
animation-iteration-count: 1;
88+
89+
/!*--animation属于模拟的帧动画,默认情况下动画运动完成会回到第一帧的位置(本质是虽然看到元素在运动,但是元素的位置其实是没有变化的),如果想要让动画运动完成停留在最后一帧的位置,我们需要增加如下的属性--*!/
90+
-webkit-animation-fill-mode: both;
91+
animation-fill-mode: both;
92+
}*/
93+
94+
@-webkit-keyframes myTwoMove {
95+
0%, 50%, 100% {
96+
-webkit-transform: translateX(0) rotate(0deg);
97+
transform: translateX(0) rotate(0deg);
98+
}
99+
25% {
100+
-webkit-transform: translateX(-200px) rotate(-360deg);
101+
transform: translateX(-200px) rotate(-360deg);
102+
}
103+
75% {
104+
-webkit-transform: translateX(200px) rotate(360deg);
105+
transform: translateX(200px) rotate(360deg);
106+
}
107+
}
108+
109+
@keyframes myTwoMove {
110+
0%, 50%, 100% {
111+
-webkit-transform: translateX(0) rotate(0deg);
112+
transform: translateX(0) rotate(0deg);
113+
}
114+
25% {
115+
-webkit-transform: translateX(-200px) rotate(-360deg);
116+
transform: translateX(-200px) rotate(-360deg);
117+
}
118+
75% {
119+
-webkit-transform: translateX(200px) rotate(360deg);
120+
transform: translateX(200px) rotate(360deg);
121+
}
122+
}
123+
124+
.box {
125+
border-radius: 50%;
126+
-webkit-animation: myTwoMove 2s linear 0s infinite both;
127+
animation: myTwoMove 2s linear 0s infinite both;
128+
}
129+
</style>
130+
</head>
131+
<body>
132+
<div class="box"></div>
133+
134+
</body>
135+
</html>

‎20160625_移动端第二天/2、demo1.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>珠峰培训</title>
6+
<link type="text/css" rel="stylesheet" href="css/reset.min.css"/>
7+
<style type="text/css">
8+
body {
9+
overflow: hidden;
10+
}
11+
12+
.box {
13+
position: relative;
14+
margin: 50px auto;
15+
width: 1200px;
16+
border: 1px solid #ededed;
17+
border-top-color: #d1d1d1;
18+
}
19+
20+
.box .list {
21+
padding: 20px 25px;
22+
height: 220px;
23+
}
24+
25+
.box .list img {
26+
width: 100%;
27+
height: 100%;
28+
}
29+
30+
.box .move {
31+
position: absolute;
32+
left: 0;
33+
top: -3px;
34+
width: 100%;
35+
height: 5px;
36+
overflow: hidden;
37+
}
38+
39+
.box .move i {
40+
position: absolute;
41+
right: 0;
42+
top: 0;
43+
width: 365px;
44+
height: 5px;
45+
background: url("img/jd.png") no-repeat 0 -124px red;
46+
47+
/*--设置过渡动画--*/
48+
-webkit-transition: all .8s linear 0s;
49+
transition: all .8s linear 0s;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div class="box" id="box">
55+
<div class="move">
56+
<i></i>
57+
</div>
58+
<div class="list">
59+
<img src="img/jdLike.jpg"/>
60+
</div>
61+
</div>
62+
<script type="text/javascript">
63+
var oBox = document.getElementById("box"),
64+
oBoxMove = oBox.getElementsByTagName("i")[0];
65+
66+
oBox.onmouseenter = function () {
67+
var _this = oBoxMove;
68+
//->让I标签立马运动到-1200px的位置
69+
_this.style.webkitTransitionDuration = "0s";
70+
_this.style.webkitTransform = "translateX(-1200px)";
71+
72+
//->当回归到初始位置后,我们让我从-1200px的位置运动到0px的位置(需要过渡动画)
73+
var timer = window.setTimeout(function () {
74+
_this.style.webkitTransitionDuration = ".8s";
75+
_this.style.webkitTransform = "translateX(0px)";
76+
window.clearTimeout(timer);
77+
}, 100);
78+
//->使用JS操作CSS3动画,CSS3动画解析处理是需要一定的反应时间的,所以我们一般都会用定时器做一个少许的延迟
79+
};
80+
</script>
81+
</body>
82+
</html>

‎20160625_移动端第二天/3、demo1.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>珠峰培训</title>
6+
<link type="text/css" rel="stylesheet" href="css/reset.min.css"/>
7+
<style type="text/css">
8+
body {
9+
overflow: hidden;
10+
}
11+
12+
.box {
13+
position: relative;
14+
margin: 50px auto;
15+
width: 1200px;
16+
border: 1px solid #ededed;
17+
border-top-color: #d1d1d1;
18+
}
19+
20+
.box .list {
21+
padding: 20px 25px;
22+
height: 220px;
23+
}
24+
25+
.box .list img {
26+
width: 100%;
27+
height: 100%;
28+
}
29+
30+
.box .move {
31+
position: absolute;
32+
left: 0;
33+
top: -3px;
34+
width: 100%;
35+
height: 5px;
36+
overflow: hidden;
37+
}
38+
39+
.box .move i {
40+
position: absolute;
41+
right: 0;
42+
top: 0;
43+
width: 365px;
44+
height: 5px;
45+
background: url("img/jd.png") no-repeat 0 -124px red;
46+
}
47+
48+
/*--CSS3帧动画的运动轨迹是事先在CSS中设定好的,不能在JS中动态的修改和设置;遇到类似的需求我们只能使用TRANSITION动画--*/
49+
@-webkit-keyframes myMove {
50+
0% {
51+
-webkit-transform: translateX(-1200px);
52+
transform: translateX(-1200px);
53+
}
54+
100% {
55+
-webkit-transform: translateX(0);
56+
transform: translateX(0);
57+
}
58+
}
59+
60+
@keyframes myMove {
61+
0% {
62+
-webkit-transform: translateX(-1200px);
63+
transform: translateX(-1200px);
64+
}
65+
100% {
66+
-webkit-transform: translateX(0);
67+
transform: translateX(0);
68+
}
69+
}
70+
71+
.moveImg {
72+
-webkit-animation: myMove .8s linear 0s 1 both;
73+
animation: myMove .8s linear 0s 1 both;
74+
}
75+
</style>
76+
</head>
77+
<body>
78+
<div class="box" id="box">
79+
<div class="move">
80+
<i></i>
81+
</div>
82+
<div class="list">
83+
<img src="img/jdLike.jpg"/>
84+
</div>
85+
</div>
86+
<script type="text/javascript">
87+
var oBox = document.getElementById("box"),
88+
oBoxMove = oBox.getElementsByTagName("i")[0];
89+
90+
oBox.onmouseenter = function () {
91+
//->让其按照既定的帧动画运动(800ms运动完成)
92+
var _this = oBoxMove;
93+
_this.className = "moveImg";
94+
95+
//->于此同时开启一个定时器,当CSS3动画运动完成后我们把样式类名移除,方便下一次进入动画可以运行
96+
var timer = window.setTimeout(function () {
97+
_this.style.webkitTransform = "translateX(0)";
98+
_this.className = "";
99+
window.clearTimeout(timer);
100+
}, 800);
101+
};
102+
103+
/*oBox.onmouseleave = function () {
104+
var _this = oBoxMove;
105+
_this.className = "";
106+
};*/
107+
</script>
108+
</body>
109+
</html>

0 commit comments

Comments
 (0)