1. 首頁 > 動漫 > >

斗羅大陸魂師對決|HTML知識梳理大全（五）！

acgn漫評

斗羅大陸魂師對決|HTML知識梳理大全（五）！

文章圖片

【斗羅大陸魂師對決|HTML知識梳理大全（五）！】斗羅大陸魂師對決|HTML知識梳理大全（五）！

1.旋轉中心點怎么設置？如何實現縮放效果？
方法：旋轉中心點通過transform-origin進行設置 ， transform-origin:X 軸的位置y軸的位置z軸的位置;如下圖 ， 我們以左下角為旋轉中心點 ， 就可以這樣設置：

2.動畫如何使用？
第一步 ， 需要定義動畫：
@keyframes動畫的名稱 <{p>動畫的位置 {初始位置
動畫的最終位置 {最終位置


第二步 ， 引用動畫：
animation:動畫的名稱 動畫所用的時間 動畫將如何完成一個周期動畫什么時候開始 動畫應該播放多少次 是否循環交替反向播放動畫動畫結束后的位置;
animation-timing-function 。 動畫將如何完成一個周期 ， 默認值是ease ， 以低速開始 ， 然后加快 ， 在結束前變慢 。 還有其他的參數可以設置：
animation-delay 屬性定義動畫什么時候開始 。
animation-iteration-count屬性定義動畫應該播放多少次 。 默認是一次 ， 可以設置為infinite ， 無限循環播放 。
animation-direction 屬性定義是否循環交替反向播放動畫 。
animation-fill-mode 動畫結束后的位置 。

    相關經驗推薦