Skip to content

Commit 2c6e745

Browse files
thanhtaivttthanhtaivtt
committed
fix syntax
1 parent c54bd53 commit 2c6e745

File tree

1 file changed

+48
-30
lines changed

1 file changed

+48
-30
lines changed

‎README.md

+48-30
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,42 @@ Sau khi đã tìm hiểu xong bài [tạo chuyển động animation trong CSS3]
66

77
Đầu tiên mình sẽ tạo khung HTML và các thẻ cần thiết.
88

9-
<div class="demo-code">
109

11-
Toidicode.com - Create button animation
10+
```html
11+
<!doctype html>
12+
<html lang="en">
13+
<head>
14+
<meta charset="UTF-8">
15+
<meta name="viewport"
16+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
17+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
18+
<title>Toidicode.com - Create button animation</title>
19+
<style>
20+
21+
</style>
22+
</head>
23+
<body>
24+
<a href="#">
25+
<span></span>
26+
<span></span>
27+
<span></span>
28+
<span></span>
29+
Button
30+
</a>
31+
</body>
32+
</html>
33+
```
34+
35+
[Chạy Code](https://toidicode.com/live/?id=722)
1236

13-
`[Button](#)`
1437

15-
<div class="run">[Chạy Code](https://toidicode.com/live/?id=722)</div>
16-
17-
</div>
1838

1939
## 2. CSS cơ bản cho button.
2040

2141
Sau khi đã HTML khung cơ bản xong, tiếp tục mình sẽ CSS cho thẻ a ở giữa màn hình và background tối màu cho mọi người dễ nhìn.
2242

23-
<div class="demo-code">
2443

44+
```css
2545
body {
2646
padding: 0;
2747
margin: 0;
@@ -46,17 +66,17 @@ Sau khi đã HTML khung cơ bản xong, tiếp tục mình sẽ CSS cho thẻ a
4666
box-shadow: 0 1px 7px .4px #000000;
4767
color: red;
4868
}
69+
```
70+
[Chạy Code](https://toidicode.com/live/?id=723)
4971

50-
<div class="run">[Chạy Code](https://toidicode.com/live/?id=723)</div>
5172

52-
</div>
5373

5474
## 3. CSS border cho button.
5575

5676
Tiếp tục chúng ta sẽ css cho 4 thẻ span bên trong thẻ a thành border.
5777

58-
<div class="demo-code">
5978

79+
```css
6080
/*TOP*/
6181
a span:nth-child(1) {
6282
content: '';
@@ -101,15 +121,15 @@ Tiếp tục chúng ta sẽ css cho 4 thẻ span bên trong thẻ a thành borde
101121
top: 0;
102122
left: 0;
103123
}
124+
```
125+
[Chạy Code](https://toidicode.com/live/?id=724)
104126

105-
<div class="run">[Chạy Code](https://toidicode.com/live/?id=724)</div>
106127

107-
</div>
108128

109129
Tiếp theo đó chúng ta sẽ gradient màu sắc cho 4 thẻ span.
110130

111-
<div class="demo-code">
112131

132+
```css
113133
/*TOP*/
114134
a span:nth-child(1) {
115135
content: '';
@@ -155,19 +175,19 @@ Tiếp theo đó chúng ta sẽ gradient màu sắc cho 4 thẻ span.
155175
left: 0;
156176

157177
}
178+
```
179+
[Chạy Code](https://toidicode.com/live/?id=725)
158180

159-
<div class="run">[Chạy Code](https://toidicode.com/live/?id=725)</div>
160181

161-
</div>
162182

163183
Giờ lom đã có vẻ đẹp hơn một chút rồi đó ![laugh](https://toidicode.com/vendor/unisharp/laravel-ckeditor/plugins/smiley/images/teeth_smile.png "laugh")
164184

165185
## 4, Tạo chuyển động - animation.
166186

167187
OK, sau khi đã css cơ bản tương đối đẹp rồi giờ chúng ta sẽ tạo ra chuyển động cho nó.
168188

169-
<div class="demo-code">
170189

190+
```css
171191
@keyframes animationdown {
172192
from {
173193
transform: translateY(-100%);
@@ -203,13 +223,11 @@ OK, sau khi đã css cơ bản tương đối đẹp rồi giờ chúng ta sẽ
203223
transform: translateX(-100%);
204224
}
205225
}
206-
207-
</div>
226+
```css
208227

209228
Phía trên là chuyển động lên xuống trái phải cho từng thẻ span, giờ chúng ta sẽ thiết lập từ thẻ span ứng với từng animation.
210229

211-
<div class="demo-code">
212-
230+
```css
213231
/*TOP*/
214232
a span:nth-child(1) {
215233
content: '';
@@ -257,17 +275,14 @@ Phía trên là chuyển động lên xuống trái phải cho từng thẻ span
257275
left: 0;
258276
animation: animationtop 2s linear 0.3s infinite;
259277
}
260-
261-
<div class="run">[Chạy Code](https://toidicode.com/live/?id=726)</div>
262-
263-
</div>
278+
```
279+
[Chạy Code](https://toidicode.com/live/?id=726)
264280

265281
![](https://toidicode.com/filemanager/images/1/blog/create_button_animation_using_html_css.png)
266282

267283
Chuyển động đã tương đối đẹp rồi, nhưng để đẹp hơn chúng ta cần ẩn những chi tiết khi chuyển động lòi ra bên ngoài thẻ `a`. bằng cách thêm `overflow: hidden` vào thẻ `a`.
268284

269-
<div class="demo-code">
270-
285+
```css
271286
a {
272287
position: absolute;
273288
left: 50%;
@@ -283,11 +298,14 @@ Chuyển động đã tương đối đẹp rồi, nhưng để đẹp hơn chú
283298
transition: all 0.3s;
284299

285300
}
301+
```
302+
[Chạy Code](https://toidicode.com/live/?id=727)
286303

287-
<div class="run">[Chạy Code](https://toidicode.com/live/?id=727)</div>
288-
289-
</div>
290304

291305
Như vậy là done, nếu bạn cần chuyển động nhanh hay chậm hơn thì bạn có thể thay đổi thời gian sao cho hợp ý bạn.
292306

293-
## 5, Demo và download thư viện.
307+
## 5, Demo và download thư viện.
308+
309+
[Demo](https://toidicode.com/live/?id=727)
310+
311+
[Download Source](https://toidicode.com/live/?id=727)

0 commit comments

Comments
 (0)