## <font color="#FFD700"><i class="fa fa-trophy" aria-hidden="true"></i></font> ### 2022 iThome鐵人賽 ### 小題大作的 30 個 HackMD技巧 <font color="#FFD700">#16</font> # HackMD ## 簡報客製動畫設定 ---- ## 順續出現的動畫 1. 第一點<!-- .element: class="fragment" data-fragment-index="1" --> 2. 第二點<!-- .element: class="fragment" data-fragment-index="2" --> ``` ## 順續出現的動畫 1. 第一點<!-- .element: class="fragment" data-fragment-index="1" --> 2. 第二點<!-- .element: class="fragment" data-fragment-index="2" --> ``` ---- ## 順續出現的動畫 1.如果整段沒有空格<!-- .element: class="fragment" data-fragment-index="1" --> 2.就可以隱藏清單標頭<!-- .element: class="fragment" data-fragment-index="2" --> 3.請記得用兩個空格換行<!-- .element: class="fragment" data-fragment-index="3" --> ---- ``` 1. 第一點<!-- .element: class="fragment" data-fragment-index="1" --> 2. 第二點<!-- .element: class="fragment" data-fragment-index="2" --> 1.第一點<!-- .element: class="fragment" data-fragment-index="1" --> 2.第二點<!-- .element: class="fragment" data-fragment-index="2" --> ``` ---- ### [layout範例](https://revealjs.com/layout/) <div class="r-stack"> <img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300"> <img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450"> <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400"> </div> ---- ``` <div class="r-stack"> <img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300"> <img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450"> <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400"> </div> ``` ---- <h2 class="r-fit-text">THANK YOU</h2>