吳孟儒text editor文字編輯器CSS動畫animation

 <style> 

h2 {color: yellow; text-align: center;

background: blue; font-weight:bold;

font-style: italic ; }

h1{

  border: 10px solid purple;

  border-radius: 30px;/*diameter直徑,radius半徑*/

  background-color: orange;

  color: white;

  animation: my 5s infinite;

  text-align: center;

}

/*註解border邊界, animation動畫, align排列*/

@keyframes my{

  50% {transform: rotate(-10deg);}

}

</style>

<h1>德明科大吳孟儒程式設計</h1>

<p style="font-size: 20px; text-height: 1.5;">第一堂課要了解文字編輯器（text editor）、程式解譯器（interpreter）、程式編輯器（compiler）與程式整合開發環境（IDE, Integrated Development Environment）。</p>

<p style="font-size: 20px; text-height: 1.5;">課程評分是「自己動手做的程度、品質、了解程度、自我發揮的創意。「動手做」絕對重要！有做，就及格，可以做得慢、可以補教、可以請同學或老師帶你一步一步地做。</p>

<h2>以上畫面的程式碼</h2>

<H2>HEADER因為HTML允許大小寫</H2>

<H2>今天重點CSS動畫</H2>

CSS=Cascading Style Sheet階層式樣式表

cascade連續的、階層的瀑布

my是自訂變數，定義一個動畫的名稱。