如何制作人物跳动动画

CSS制作人物跳动动画方法如下：

操作方法

  • 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

    运行程序

赞 (0)

相关推荐

  • 如何利用flash制作人物跑步动画

    利用flash制作人物跑步动画,主要利用了交换位图功能,现在就分享操作步骤和截图,本仅供参考使用. 操作方法 01 首先启动flash8,新建一文档,设置大小为550*400,帧频为12fps,背景颜 ...

  • 怎样用FLASH制作人物走路动画

    FLASH制作人物运动动画 步骤/方法 01 一.人的走路动作的基本规律 人在走路中的基本规律是:左右两脚交替向前,为了求得平衡,当左脚向前迈步时左手向后摆动,右脚向前迈步时右手向后摆动.在走的过程中 ...

  • AE怎么给视频制作人物定格动画效果?

    如何利用AE制作人物定格效果 一.图文教程 1.打开Adobe After Effects CC 将素材导入.在菜单选 文件 - 导入 - 文件 或 快捷键 CTRL + I  2.导入的素材拖放到新 ...

  • PPT怎么制作波浪形跳动的文字动画?

    ppt中想要制作一个波浪形漂浮的动画,该怎么制作呢?下面我们看看详细的教程. 1.直接在电脑桌面右键新建PPT 2.输入需要不停跳动的词比如“谢谢观看!” 3.在菜单栏的“动画”项中点击“自定义动画” ...

  • ppt怎么制作人物头像轮播的效果? ppt照片轮播动画制作方法

    ppt中可以使用口袋动画制作很多动画效果,该怎么制作人物头像轮播的效果被?请看下文详细介绍. 1.首先启动ppt2010,执行插入-图片命令,插入一组人物照片. 2.执行ctrl+a组合键全选,接着设 ...

  • 怎么制作抖音动画人物视频

    怎么制作抖音动画人物视频

    字说APP是我们常用的视频编辑软件之一,有小伙伴问怎么制作抖音动画人物视频,下面小编介绍一下.具体如下:1. 打开[字说]APP,点击下方的[+]号2. 进入后,编辑一段文字,按[下一步]3. 点击下 ...

  • 如何用Flash制作一个跳动的黄色笑脸小球

    现在flash已经覆盖了网络的各个方面,很多人看了网上动画之后都想学学,网上多数是视频,教程繁琐记不住,这次您就和编一步步去做就可以了.今天为大家带来用Flash制作一个跳动的黄色笑脸小球,教程比较基 ...

  • 如何利用ppt制作小球弹跳动画？

    如果使用PPT制作跳动的小球?利用ppt制作小球弹跳动画,教程中主要利用了直线路径,方法不难,只要几步就可以快速制作出弹跳动画效果,话不多说,接下来小编就给大家分享具体操作的步骤和截图,一起去看看吧! ...

  • PPT利用路径效果制作一个射日动画

    很久很久以前,天上出现了10个太阳……射日的故事,大家早已耳熟能详.今天,我们在PPT里利用路径效果,做一个射日动画吧.包括背景填充,路径使用,画面转换等. 一.背景填充. 做一个蓝天草地的背景,直接 ...