如何制作人物跳动动画
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
- 阅读 ( 843 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章