& lt！doctype？html & gt
& lthtml & gt
& lthead & gt
& ltmeta？charset="utf-8 " >
& lttitle & gt無標題文檔
& ltstyle & gt
身體？{背景色:？黃色}
/*將網頁的背景顏色定義為黃色*/
。宰如
保證金:100px？自動；
寬度:180 px；
高度:60px
文本對齊:居中；
font-size:10px；
}
。宰如？& gt？div？{
背景色:？cadetblue
高度:60px
寬度:15px；
浮動:？左；
顯示:內嵌-塊；？/*該元素將顯示為內嵌表格(類似於？& lt表& gt)，表格前後沒有換行符。*/
-moz-動畫:？stretchdelay？1.2s？無限？緩進緩出；/*-webkit-代表safari和chrome私有屬性*，其他-moz-代表Firefox？-ms-代表IE*/
動畫:？stretchdelay？1.2s？無限？緩進緩出；/*等待1.2S開始動畫，動畫低速開始，低速結束。animation-delay以秒或毫秒為單位定義動畫開始的時間*/
}
。宰如？. zairu2？{
-moz-動畫-延時:？-1.1s；
動畫-延遲:？-1.1s；
}
。宰如？. zairu3？{
-moz-動畫-延時:？-1.0s；
動畫-延遲:？-1.0s；
}
。宰如？. zairu4？{
-moz-動畫-延時:？-0.9s；
動畫-延遲:？-0.9s；
}
。宰如？. zairu5？{
-moz-動畫-延時:？-0.8s；
動畫-延遲:？-0.8s；
}
。宰如？. zairu6？{
-moz-動畫-延時:？-0.7s；
動畫-延遲:？-0.7s；
}
。宰如？. zairu7？{
-moz-動畫-延時:？-0.6s；
動畫-延遲:？-0.6s；
}
。宰如？. zairu8？{
-moz-動畫-延時:？-0.5s；
動畫-延遲:？-0.5s；
}
@-moz-關鍵幀？stretchdelay？{
0%,?40%,?100%?{?-moz-變換:？scaleY(0.4)？}
20%?{?-moz-變換:？scaleY(1.0)？}
}/*關鍵幀代表編輯動畫效果？r變換和動畫效果？ScaleY代表2D縮放動畫*/
@關鍵幀？stretchdelay？{
0%,?40%,?100%?{
變換:？scaleY(0.4)；
-moz-變換:？scaleY(0.4)；
}?20%?{
變換:？scaleY(1.0)；
-moz-變換:？scaleY(1.0)；
}
}
& lt/style & gt；
& lt/head & gt；
& ltbody & gt
& ltdiv？class="zairu " >
& ltdiv？class="zairu1 " >& ltp & gtL & lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu2 " >& ltp & gto & lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu3 " >& ltp & gta & lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu4 " >& ltp & gtd & lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu5 " >& ltp & gt我& lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu6 " >& ltp & gtn & lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu7 " >& ltp & gtg & lt/p & gt；& lt/div & gt；
& ltdiv？class="zairu8 " >。& lt/div & gt；
& lt/div & gt；
& lt/body & gt；
& lt/html & gt；