1. 程式人生 > >HTML5+CSS3實現春節賀卡

HTML5+CSS3實現春節賀卡

con 1-1 .html 優化 sof 就是 serve html5 pos

HTML5+CSS3實現春節賀卡

切圖——>重構——>前端——>優化

技術分享圖片

知道原生的JS代碼,了解Html5API,了解WampServer。

結構層為index.html

因為需要點擊光盤讓音樂開始和停止,又使用id獲取元素要比class容易一些,所以我們將音樂改為 id="music"

表示層為style.css

px就是像素值,em就是根據基準來縮放字體的大小。em是相對於父元素的屬性而計算的,rem是相對於根元素

box-sizing 屬性允許你以某種方式定義某些元素,以適應指定區域。

技術分享圖片

animation動畫

特效

使用animation和keyframes

效果1-1、光盤轉動

效果1-2、紅燈籠閃爍

效果2-3、三個圈轉

HTML5+CSS3實現春節賀卡