CSS3——制作人物走路的小动画
一个很简单的小动画,但是还挺有意思的,就是找这种图片很麻烦,我这里把我找的一张图片贴上来,这张图片是我在网上找的,又改了背景色和大小。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路</title>
<style type="text/css">
.box{
width:50px;
height:160px;
border:1px solid #000;
margin:50px auto 0;
overflow:hidden;
position:relative;
} .box img{
position: absolute;
left:0;
top:0; animation:walking 1s steps(10) infinite;
} @keyframes walking{
from{
left:0;
}
to{
left:-520px;
}
}
</style>
</head>
<body>
<div class="box"><img src="data:images/1212.png" alt="walking"></div>
</body>
</html>
效果展示:(感觉效果不是特别好,动作的连贯性还不够好,需要改改图片,偷个懒不改啦~)

CSS3——制作人物走路的小动画的更多相关文章
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 使用CSS3制作网站常用的小三角形
现在在前端开发中,经常会看到一些小三角形,如一些导航的下拉菜单,还有一些聊天信息的气泡模式,很多时候我们都是通过切图片的方法来制作,今天零度给大家分享一个完全通过css3实现的小三角效果. 先上htm ...
- 分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
随机推荐
- 你知道 Git 是如何做版本控制的吗?(转)
总结:阅读这篇文章需要20分钟 本文是转载自 滴滴WebApp架构组 的一篇文章,文章讲解了神秘的.git目录下的一些文件,最终阐述了git是如何存储数据,及git分支的相关内容. git如何存储数据 ...
- Python学习之==>操作MySQL
一.简介: MySQL为关系型数据库,其他关系型数据库包括Oracle.DB2.Sql Server等等.Python操作MySQL需要使用到pymsyql模块,pip安装即可. 二.操作MySQL步 ...
- Debian系列Linux的隐藏WiFi
Debian系列Linux共用相同的deb安装包,拥有大量的各种软件,是Linux里面最主要的生态系.包括Ubuntu及其衍生版本如Lubuntu/Mate/Kubuntu等,在ARM上也有很好的支持 ...
- 虚拟机三种网络模式及Xshell与Centos7虚拟机连接
一.虚拟机的三种网络模式 1.桥接模式 a.该模式下的虚拟机可以上外网 b. 局域网之内的主机可以访问该虚拟机(做共享服务器使用) c. 该虚拟机可以和宿主机进行通信 d. 同一台主机相同模式下的虚拟 ...
- js--事件--事件代理
js--事件--事件代理:https://blog.csdn.net/github_34514750/article/details/53067133
- WHY吃糖果 QDUOJ 二分嵌套
WHY吃糖果 QDUOJ 二分嵌套 原题链接 解题思路参考链接 题意 给出一个\(n*n\)的矩阵,每个格子的权值为\(i*i+j*j+i*j+100000*(i-j)\),求该矩阵中第m小的权值为多 ...
- python3—廖雪峰之练习(三)
列表生成式练习 请修改列表生成式,通过添加if语句保证列表生成式能正确执行: L1 = ['Hello', 'World', 18, 'Apple', None] L2 = [] for x in L ...
- 短信群发(Thinkphp内核)
public function save(){ $id = I('id'); $Goods = M('message'); $info = $Goods->find($id); //就收数据 $ ...
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- golang 状态机
package main import ( "errors" "fmt" "reflect" ) type State interface ...