如何制作人物跳動動畫
CSS制作人物跳動動畫方法如下：
工具/材料
webstrorm
操作方法
-
01
在編譯環境(webstrorm)新建一個名為donghua的html文件
-
02
在工程文件建一個名為images的文件夾，用來放我們所需要的動畫圖片
-
03
在<body>標簽里面設置兩個<div>用來放置動畫和保障動畫運行的坐標環境
-
04
設置外邊距和內邊距樣式
-
05
設置圖片的位置和樣式（相對定位：relative）讓<div>標簽離瀏覽器網頁的頭部50px,左右居中
-
06
設置放置圖片的位置為（絕對定位：absolute），插入圖片背景，使圖片產生運動幻覺的一種電影（animation）
-
07
利用@keyframes定義動畫移動步驟
-
08
打開動畫圖片，利用工具測算橫排圖片的上下左右的橫坐標和縱坐標，如第一張圖片的坐標為：橫坐標X：-110px,縱坐標為0
-
09
利用工具，測算縱排圖片的坐標為：橫坐標為0，縱坐標變為（-50px相當于圖片的高度）
-
10
從百分之零開始至百分之百開始設置圖片坐標移動的效果
-
11
運行程序
- End
- 發表于 2017-12-01 00:00
- 閱讀 ( 674 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章