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.制作之前呢,我们先来 ...
随机推荐
- 测开之路一百四十四:ORM之SQLAlchemy查询
在上一篇的基础上,插入数据 查询 Department.query.all() # 用表对象查db.session.query(Department).all() # 用db对象查 查询前两条,直接p ...
- robotframework的变量的使用
本篇用以记录RF的变量的使用 目录 1.简要介绍 2.使用关键字添加变量 3.使用菜单添加变量 1.简要介绍 RF可以通过菜单和关键字来添加变量,可以根据自己的需求来选择添加变量的方式 2.使用关键字 ...
- Unity3D 可空值类型 Nullable
值类型的变量永远不会变null,因为值类型是其本身不会变成null.引用类型可变成null,内存会全部使用0来表示null,因为这种开销会降低,仅仅需要将一块内存清除. 表示一些空值的方案: 1.使用 ...
- java 发送 http post 和 get 请求(利用unirest)
调用服务器端的接口在前端调用,但是我们也会经常遇到在服务器后端调用接口的情况,网上的例子大部分都是用 jdk 原生的 URL realUrl = new URL(url); URLConnection ...
- Java的in.nextInt()和in.nextLine()方法的具体内涵
本人也是刚开始学习java语言,在学习的过程中,老师让我们做一个模拟学生学籍管理系统的小程序.因为刚开始,做的是比较简单的,用switch语句做界面,然后配合Scanner 接收输入的数字进行跳转,完 ...
- TCP/IP协议-1
转载资源,链接地址https://www.cnblogs.com/evablogs/p/6709707.html
- 基于html5二个div 连线
因为要实现拖拽连线研究了一下基于extjs 和html5的不同实现方法 extjs底层的画图引擎是svg 不知道在html5大潮即将袭来的前夕一贯走在技术前沿的extjs开发团队没有自己封装基于htm ...
- 【Qt开发】【VS开发】VS2010+Qt开发环境搭建
QT与JAVA有点类似,也是一种跨平台的软件(当然在windows平台和linux平台需要安装相应的QT开发环境和运行库,类似于JAVA在不同平台下的虚拟机JVM环境),因此对于某些需要同时支持win ...
- 如何在centos7中显示/etc/目录下以非字母开头,后面跟了一个字母及其它任意字符的文件或目录
ls /etc |grep "^[^[:alpha:]][[:alpha:]].*"
- [Python3] 004 字符串的基本使用
目录 1. 字符串简介 1.1 作用 1.2 注意点 2. 使用方式 2.1 用引号括起来 少废话,上例子 2.2 单.双引号可以"轮换交替" 少废话,上例子 3. 转义字符 3. ...