Skip to content

Commit c8e9eb8

Browse files
author
Li Xinyang
committed
add transition sample code and sample link
1 parent c01e3f6 commit c8e9eb8

File tree

3 files changed

+196
-2
lines changed

3 files changed

+196
-2
lines changed

‎SampleCode/CSS/Transform3D.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
margin: 50px;
1010
text-align: center;
1111
position: relative;
12-
margin: ;
13-
100px 0;
12+
margin: 100px 0;
1413
}
1514

1615
.container {

‎SampleCode/CSS/Transition.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Transition</title>
7+
<style type="text/css">
8+
body {
9+
margin: 50px;
10+
text-align: center;
11+
position: relative;
12+
margin: ;
13+
100px 0;
14+
}
15+
16+
.container {
17+
position: relative;
18+
margin: 100px 10px;
19+
display: inline-block;
20+
perspective: 500px;
21+
}
22+
23+
.box {
24+
width: 150px;
25+
height: 150px;
26+
border: 3px solid black;
27+
background-color: rgba(138, 161, 64, .5);
28+
}
29+
30+
.box-origin {
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
z-index: -999;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<h1> 动画 - Transition </h1>
41+
<h2>transition</h2>
42+
<div class="container">
43+
<div id="box1" class="box"></div>
44+
<div class="box box-origin"></div>
45+
<p>无过度</p>
46+
</div>
47+
<div class="container">
48+
<div id="box2" class="box"></div>
49+
<div class="box box-origin"></div>
50+
<p>有过度</p>
51+
</div>
52+
<style>
53+
#box1:hover {
54+
transform: rotate(45deg);
55+
}
56+
57+
#box2:hover {
58+
transition-delay: .3s;
59+
transform: rotate(45deg);
60+
transition: 1s;
61+
}
62+
</style>
63+
<h2>transition-property</h2>
64+
<div class="row">
65+
<div class="box hover-demo" id="box3">
66+
<p>none</p>
67+
</div>
68+
</div>
69+
<style type="text/css">
70+
.row {
71+
position: relative;
72+
margin: 10px;
73+
height: 155px;
74+
background: rgba(187, 198, 145, 0.5);
75+
border: 3px dashed rgba(135, 162, 64, 1);
76+
}
77+
78+
#box3 {
79+
border-radius: 50%;
80+
position: absolute;
81+
top: 0;
82+
left: 0;
83+
font-size: 3rem;
84+
}
85+
86+
#box3:hover {
87+
transition-delay: .3s;
88+
transition: 2s;
89+
transition-property: none;
90+
left: calc(100% - 150px);
91+
color: white;
92+
top: 0;
93+
}
94+
</style>
95+
<div class="row">
96+
<div class="box hover-demo" id="box4">
97+
<p>all</p>
98+
</div>
99+
</div>
100+
<style type="text/css">
101+
#box4 {
102+
border-radius: 50%;
103+
position: absolute;
104+
top: 0;
105+
left: 0;
106+
font-size: 3rem;
107+
}
108+
109+
#box4:hover {
110+
transition-delay: .3s;
111+
transition: 2s;
112+
transition-property: all;
113+
color: white;
114+
left: calc(100% - 150px);
115+
top: 0;
116+
}
117+
</style>
118+
<div class="row">
119+
<div class="box hover-demo" id="box5">
120+
<p>left</p>
121+
</div>
122+
</div>
123+
<style type="text/css">
124+
#box5 {
125+
border-radius: 50%;
126+
transition-property: all;
127+
position: absolute;
128+
top: 0;
129+
left: 0;
130+
font-size: 3rem;
131+
}
132+
133+
#box5:hover {
134+
transition-delay: .3s;
135+
transition: 2s;
136+
transition-property: left;
137+
color: white;
138+
left: calc(100% - 150px);
139+
top: 0;
140+
}
141+
</style>
142+
<div class="row">
143+
<div class="box hover-demo" id="box6">
144+
<p>color</p>
145+
</div>
146+
</div>
147+
<style type="text/css">
148+
#box6 {
149+
border-radius: 50%;
150+
transition-property: all;
151+
position: absolute;
152+
top: 0;
153+
left: 0;
154+
font-size: 3rem;
155+
}
156+
157+
#box6:hover {
158+
transition-delay: .3s;
159+
transition: 2s;
160+
transition-property: color;
161+
color: white;
162+
left: calc(100% - 150px);
163+
top: 0;
164+
}
165+
</style>
166+
<h2>多个动画，多个时间</h2>
167+
<div class="row">
168+
<div class="box hover-demo" id="box7">
169+
<p>multipe</p>
170+
</div>
171+
</div>
172+
<style type="text/css">
173+
#box7 {
174+
border-radius: 50%;
175+
position: absolute;
176+
top: 0;
177+
left: 0;
178+
font-size: 3rem;
179+
}
180+
181+
#box7:hover {
182+
transition-delay: .3s;
183+
transition-property: left, color, border-radius;
184+
transition-duration: 1s, 3s, 8s;
185+
color: white;
186+
border-radius: 0;
187+
left: calc(100% - 150px);
188+
top: 0;
189+
}
190+
</style>
191+
</body>
192+
193+
</html>

‎WebCreation/WebCreation-CSS-2.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -626,6 +626,8 @@ backface-visibility: hidden;
626626

627627
#### transition
628628

629+
[过度动画](../SampleCode/CSS/Transition.html)
630+
629631
其为众多 `<single-transition>` 的值缩写。（当两个时间同时出现是，第一个时间为动画长度，第二个时间为动画延时）
630632

631633
```

0 commit comments

Comments
 (0)