學期第四周周記

用css+html設計創作網頁版大白，實驗步驟源**來自

>
>
charset
="utf-8"
>
>
baymaxtitle
>
>
body
#baymax
#head
#eye,
#eye2
#eye2
#mouth
#torso,
#belly
#belly
#cover
#heart
#left-arm,
#right-arm
#right-arm
#l-bigfinger,
#r-bigfinger
#r-bigfinger
#l-smallfinger,
#r-smallfinger
#r-smallfinger
#left-leg,
#right-leg
#right-leg
style
>
head
>
>
"baymax"
>
"head"
>
"eye"
>
div>
"eye2"
>
div>
"mouth"
>
div>
div>
"torso"
>
"heart"
>
div>
div>
"belly"
>
"cover"
>
div>
div>
"left-arm"
>
"l-bigfinger"
>
div>
"l-smallfinger"
>
div>
div>
"right-arm"
>
"r-bigfinger"
>
div>
"r-smallfinger"
>
div>
div>
"left-leg"
>
div>
"right-leg"
>
div>
div>
body
>
html
>

在此基礎上做了一些修改，讓大白的眼睛動起來，有乙個眨眼的動作，這裡由於本人水平太低，於是找了他人的案例來參考，案例**

英文出處：著作權歸作者所有

這個案例達到的效果是大白的眼睛半閉半睜著，好像快沒電、異常疲勞的感覺，如圖

然後我看了其他眨眼的案例，在同學的幫助下（水平太差就這樣）對上面的實驗樓原始碼進行了修改

>
@keyframes myfirst
25%50%
75%100%
}#head
@keyframes blink1
15%30%
}@keyframes blink2
15%30%
}#eye
#eye:before,
#eye2:before
#eye:after,
#eye2:after
#eye2
#mouth
style
>

效果如下圖，除了眨眼還加了頭部的擺動，emmm看上去還是有點怪怪的，後期再繼續改進

眼睛的部分用了上下兩個圖層蒙版，設定動畫執行**，上下兩個蒙版會同時移動遮擋眼睛黑色的部分，營造出眨眼的視覺效果，@keyframes規則和animation屬性搭配使用，這裡用法可參考和。

我在模仿案例製作半睜眼效果時發現乙個問題

>
@keyframes blink
50%100%
}#eye,
#eye2
#eye2
#mouth
style
>

那就是 background-position屬性用百分比沒有效果，我換成畫素px才有效果，至今仍未解決問題，如果有大佬知道勞煩告知一下，因為案例中的原始碼我測試過是可行的，但是我組合了一下就不行了，另外，我發現在應用@keyframes規則時，如果將動畫執行時間全部占用，也就是說開始設定0%，結束設定100%，那麼眨眼的動作會略微有點卡頓，如果想要眨眼的動作流暢一點可以將結束時間設定稍早一點，小於100%就行，越小動作越迅速，我是設定成30%，這樣當動畫結束時會保持動作一段時間，直至animation規定完成動畫所花費的時間結束。

學期第四周周記

春季學期第四周作業

2019春季學期第四周作業

第四周筆記

學期第四周周記

春季學期第四周作業

2019春季學期第四周作業

第四周筆記

相關推薦