css3的動畫屬性

江苏快三有什么规律 www.grxbu.tw 早上好,這里是文匯信息服務官網。

CSS和CSS3都是樣式,CSS3是在CSS上新增了樣式屬性。

比如說animation,transition,transform,border-radius......

濟南文匯建站App開發

有了css3可以寫好多之前需要用jq才能寫出來的動畫。

animation和transition是我們經常用到的屬性。這兩個屬性的區別就是,一個需要手動觸發,一個不需要手動觸發。

濟南文匯建站App開發

 它們的 觸發條件不同。transition通常和hover等事件配合使用,由事件觸發。animation則立即播放。 循環。 animation可以設定循環次數。animation可以設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中可以設置每一幀需要單獨變化的樣式屬性, transition中所有樣式屬性都要一起變化。

濟南文匯建站App開發

在我們之前做的網站中,嬰貝兒就添加了一個動畫。頁面右側的園一直循環。用的就是animate。

濟南文匯建站App開發

添加一個標簽,畫一個鏤空的小圓,然后用animation設置自己想要的效果。需要學習一下 @keyframes 規則。@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果。

兩個搭配使用,就可以寫出想要的效果了。

分享的完畢,如果想看到更多的文章,請關注山東文匯信息服務有限公司,再見~


關鍵詞:
返回列表

相關文章

相關案例