- \n
- 首頁 \n
- 商品 \n
- 詳情 \n
加載中
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c792f3c2923acf456627c38fc320b1a.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"animation","attrs":{}}],"attrs":{}},{"type":"text","text":"動畫值含義:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"loading:animation-name,規定需要綁定到選擇器的 keyframe 名稱爲loading。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2s:animation-duration,規定完成動畫所花費的時間2秒。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ease:animation-timing-function,規定動畫的速度曲線,先慢中快後慢。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"infinite:animation-iteration,規定動畫應該播放的次數爲無限次。","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通過","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"animation","attrs":{}}],"attrs":{}},{"type":"text","text":"動畫完成33%、66%時與","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"內容配合,實現動態“加載中...”的效果。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"7. 插入圖片","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"3"},"content":[{"type":"text","text":"\n.loading:before {\n content: url(\"../static/img/loading.gif\");\n vertical-align: middle;\n}\n\n\n魯迅說過:真正的勇士,敢於直面慘淡的人生,敢於正視淋漓的鮮血。
\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果:","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f7/f796a2c9c40d3dd6a52926b63607d4d5.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"利用元素的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"quotes","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性指定雙引號,使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"open-quote","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性值設置開口引號,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"close-quote","attrs":{}}],"attrs":{}},{"type":"text","text":"屬性值設置閉合引號,當然","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"quotes","attrs":{}}],"attrs":{}},{"type":"text","text":"也可以指定其他符號。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"11. 添加章節數","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\nul{\n counter-reset: section;\n}\nli{\n list-style-type: none;\n counter-increment: section;\n}\nli:before{\n content: counters(section, '-') '.';\n}\n\n\n- \n
- 章節一 \n
- 章節二\n
- \n
- 章節二一 \n
- 章節二二 \n
- 章節二三 \n
\n - 章節三 \n
- 章節四 \n
- 章節五\n
- \n
- 章節五一 \n
- 章節五二 \n
\n - 章節六 \n