Skip to content

Commit 7055a3c

Browse files
author
fanjin
committed
渐变、动画
1 parent e34de79 commit 7055a3c

File tree

5 files changed

+264
-0
lines changed

5 files changed

+264
-0
lines changed

‎src/project/local-resources/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ var resource = [
77
{ id: '101', isActive: false, name: 'ODF', icon: '๡', path: "/odfView"},
88
{ id: '102', isActive: false, name: 'H5', icon: '๡', path: "/h5"},
99
{ id: '103', isActive: false, name: 'canvas', icon: '๡', path: "/canvas"},
10+
{ id: '104', isActive: false, name: 'selector', icon: '๡', path: "/selector"}
1011
]
1112
},
1213
];

‎src/project/router/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@ module.exports = {
44
require("./odfView/router"),
55
require("./H5/router"),
66
require("./canvas/router"),
7+
require("./selector/router")
78
]
89
};

‎src/project/router/selector/main.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<style scoped lang="less" src="./style.less"></style>
2+
<template>
3+
<div id="selector-test">
4+
<p>窗前明月光，李白去开窗。</p>
5+
<p>窗前明月光，李白去开窗。</p>
6+
<p>窗前明月光，李白去开窗。</p>
7+
<p id="forth">窗前明月光，李白去开窗。</p>
8+
<p>窗前明月光，李白去开窗。</p>
9+
<a href="#forth" class="pointer">第4个变色</a>
10+
<div id="linear-gradient-div"></div>
11+
<div id="radial-gradient-div"></div>
12+
<div id="rotate-box">
13+
<div id="rotate-div">帅</div>
14+
</div>
15+
<div id="threeDrotate-box">
16+
<div id="threeDrotate-div">锅</div>
17+
</div>
18+
<div id="transition-box"></div>
19+
<div id="animation-box"></div>
20+
<div id="layout-box">
21+
<div class="dv1"></div>
22+
<div class="dv2"></div>
23+
<div class="dv3"></div>
24+
<div class="dv3"></div>
25+
<div class="dv3"></div>
26+
<div class="dv3"></div>
27+
</div>
28+
<div id="strech-box">
29+
<div class="dv1"></div>
30+
<div class="dv2"></div>
31+
<div class="dv3"></div>
32+
</div>
33+
</div>
34+
</template>
35+
<script>
36+
export default {
37+
38+
}
39+
</script>

‎src/project/router/selector/router.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const selector = resolve => require(['./main'], resolve);
2+
3+
module.exports = {
4+
path: "/selector",
5+
component: selector
6+
};

‎src/project/router/selector/style.less

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
#selector-test {
2+
p:target {
3+
color: #008000;
4+
}
5+
p:nth-last-child(2) {
6+
background-color: #008000;
7+
}
8+
#linear-gradient-div {
9+
height: 100px;
10+
border: 1px solid #333;
11+
// background-image: linear-gradient(to right, yellow, green);
12+
// background-image: linear-gradient(90deg, yellow, green);
13+
// background-image: linear-gradient(to right, yellow 50%, green);
14+
background-image: linear-gradient(
15+
// to right,
16+
135deg,
17+
red 20%,
18+
green 20%, green 40%,
19+
red 40%, red 60%,
20+
green 60%, green 80%,
21+
red 80%
22+
);
23+
}
24+
#radial-gradient-div {
25+
width: 300px;
26+
height: 300px;
27+
border: 1px solid red;
28+
// background-image: radial-gradient(100px at center, red, green);
29+
// background-image: radial-gradient(100px at 10px 150px, red, green);
30+
background-image: radial-gradient(
31+
100px at 150px 150px,
32+
red 5%,
33+
green 5%,
34+
green 10%,
35+
blue 10%,
36+
blue 15%,
37+
yellow 15%,
38+
yellow 20%,
39+
#09ff00 20%,
40+
#09ff00 25%
41+
);
42+
}
43+
#rotate-box {
44+
height: 300px;
45+
border: 1px solid red;
46+
#rotate-div {
47+
margin: 50px auto;
48+
padding-top: 25px;
49+
height: 200px;
50+
width: 200px;
51+
text-align: center;
52+
font-size: 100px;
53+
background-color: #09ff00;
54+
}
55+
&:hover {
56+
#rotate-div {
57+
// transform: translate(100px);
58+
// transform: translate(100px, 100px);
59+
// transform: rotate(60deg);
60+
// transform: scale(.2, 2);
61+
transform: skew(30deg, 30deg);
62+
}
63+
}
64+
}
65+
#threeDrotate-box {
66+
height: 300px;
67+
border: 1px solid pink;
68+
#threeDrotate-div {
69+
margin: 0px auto;
70+
height: 200px;
71+
width: 200px;
72+
text-align: center;
73+
font-size: 100px;
74+
background-color: #3700ff;
75+
}
76+
&:hover {
77+
#threeDrotate-div {
78+
// transform: translateX(100px);
79+
// transform: translateY(100px);
80+
// transform: translateZ(100px);
81+
// transform: rotateX(30deg);
82+
// transform: rotateY(30deg);
83+
// transform: rotateZ(30deg);
84+
// transform: scaleX(2);
85+
// transform: scaleY(2);
86+
// transform: scaleZ(2);
87+
// transform: skewX(30deg);
88+
transform: skewY(30deg);
89+
}
90+
}
91+
}
92+
#transition-box {
93+
height: 100px;
94+
width: 100px;
95+
background-color: red;
96+
transition-property: all;
97+
transition-delay: 1s;
98+
transition-duration: 2s;
99+
transition-timing-function: linear;
100+
&:hover {
101+
height: 200px;
102+
width: 200px;
103+
background-color: #008000;
104+
}
105+
}
106+
#animation-box {
107+
height: 200px;
108+
width: 200px;
109+
border-top: 100px solid red;
110+
border-right: 100px solid green;
111+
border-bottom: 100px solid yellow;
112+
border-left: 100px solid blue;
113+
border-radius: 50%;
114+
animation-name: rotate;
115+
animation-duration: 2s;
116+
animation-iteration-count: 1;/* 动画执行次数 */
117+
animation-timing-function: linear;
118+
animation-direction: alternate;/* 动画逆播 */
119+
animation-delay: .5;
120+
animation-fill-mode: forwards;/* 动画结束 */
121+
&:hover {
122+
animation-play-state: paused;/* 停止 */
123+
}
124+
}
125+
/* @keyframes rotate {
126+
from {
127+
transform: rotateZ(0deg);
128+
}
129+
to {
130+
transform: rotateZ(360deg);
131+
}
132+
} */
133+
@keyframes rotate {
134+
0% {
135+
transform: rotateZ(0deg);
136+
}
137+
50% {
138+
transform: rotateZ(180deg);
139+
}
140+
100% {
141+
transform: rotateZ(360deg);
142+
}
143+
}
144+
#layout-box {
145+
width: 400px;
146+
height: 400px;
147+
border: 1px solid red;
148+
display: flex;
149+
/* 子元素在主轴方向的对齐方式 */
150+
// justify-content: flex-start;/* 对齐方式，默认从左向右 */
151+
// justify-content: flex-end;/* 对齐方式，从右向左 */
152+
// justify-content: center;/* 居中 */
153+
// justify-content: space-between;/* 两端对齐 */
154+
// justify-content: space-around;/* 两边空白，环绕方式 */
155+
156+
/* 主轴的方向作为调整 */
157+
// flex-direction: row;/* 默认主轴水平 */
158+
// flex-direction: row-reverse;/* 主轴水平翻转 */
159+
// flex-direction: column;/* 主轴变成垂直方向，侧轴永远垂直 */
160+
// flex-direction: column-reverse;/* 主轴竖直翻转 */
161+
162+
/* 侧轴对齐 */
163+
// align-items: flex-start;
164+
// align-items: flex-end;
165+
// align-items: center;
166+
align-items: stretch;/* 拉伸效果，没有高度的情况下有效 */
167+
168+
/* 默认子元素没有换行 */
169+
// flex-wrap: wrap;/* 子元素换行 */
170+
// flex-wrap: nowrap;/* 默认不换行 */
171+
flex-wrap: wrap-reverse;/* 反转加换行 */
172+
173+
align-content: flex-start;/* 重新设置主轴方向，子元素没有空白行 */
174+
& > .dv1 {
175+
margin-left: 5px;
176+
width: 100px;
177+
height: 100px;
178+
background-color: red;
179+
}
180+
& > .dv2 {
181+
margin-left: 5px;
182+
width: 100px;
183+
height: 100px;
184+
background-color: yellow;
185+
}
186+
& > .dv3 {
187+
margin-left: 5px;
188+
width: 100px;
189+
height: 100px;
190+
background-color: green;
191+
}
192+
}
193+
#strech-box {
194+
width: 400px;
195+
height: 400px;
196+
border: 1px solid red;
197+
display: flex;
198+
& > .dv1 {
199+
width: 100px;
200+
height: 100px;
201+
background-color: red;
202+
flex: 1;
203+
}
204+
& > .dv2 {
205+
width: 100px;
206+
height: 100px;
207+
background-color: yellow;
208+
flex: 2;
209+
}
210+
& > .dv3 {
211+
width: 100px;
212+
height: 100px;
213+
background-color: green;
214+
flex: 1;
215+
}
216+
}
217+
}

0 commit comments

Comments
 (0)