前端小作业～小人动画案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小人动画效果案例</title>
<style>
.one{
position: relative;
}
.ren1{
position: absolute;
bottom: 0px;
left: 0;
width: 154px;
height: 121px;
background: url(imggc_6d0e9e5.png) no-repeat;
animation: move 1s steps(2) infinite,move1 20s linear 0s infinite;
}
.ren2{
position: absolute;
bottom: 0px;
left: 0;
width: 165px;
height: 176px;
background: url(imggh_fee2457.png) no-repeat;
animation: move 1s steps(2) infinite,move2 20s linear 2s infinite;
}
.ren3{
position: absolute;
bottom: 0px;
left: 0;
width: 161px;
height: 149px;
background: url(imggl_c15cfd8.png) no-repeat;
animation: move 1s steps(2) infinite,move3 20s linear 4s infinite;
}
.ren4{
position: absolute;
bottom: 0px;
left: 0;
width: 185px;
height: 157px;
background: url(imggq_d281c9b.png) no-repeat;
animation: move 1s steps(2) infinite,move4 20s linear 6s infinite;
}
@keyframes move{
0%{
left: -308px;
}
100%{
background-position: -308px 0;
}
}
@keyframes move1{
0%{
left: -150px;
}
100%{
left: 1900px;
}
}
@keyframes move2{
0%{
left: -300px;
}
100%{
left: 1900px;
}
}
@keyframes move3{
0%{
left: -450px;
}
100%{
left: 1900px;
}
}
@keyframes move4{
0%{
left: -600px;
}
100%{
left: 1900px;
}
}
<×yle>
</head>
<body>
<div class="box">
<div class="ren1"></div>
<div class="ren2"></div>
<div class="ren3"></div>
<div class="ren4"></div>
</div>
</body>
<cml>
前端小作业～小人动画案例相关推荐
- 前端小作业～大风车案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [微信小程序系列] 动画案例之圆点沿着圆圈运动
作者:滴滴公共前端团队 - Tawnia 滴滴作为第一批的小程序开发者,我们也大量地用到了动画,积累了一些经验,由于市面上的小程序动画案例很少,我们也分享一部分我们做过的案例: 首先用 wx.crea ...
- 前端小作业～二维码动画
- 前端小作业～土豆网伪元素案例
- 【HTML网页前端开发加载动画案例】
提示:如需转载请联系作者授权才可使用. 目录 前言 一.网页加载动画是什么? 二.案例教学 1.HTML 当我们将css基础操作先做好之后,发现网页并不能完美对应大小,那么我们可以在基础代码定义块内做 ...
- 前端小作业～照片墙案列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端小作业～精灵图拼名字
- 前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
文章目录 前言 第一回合 一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
- 18个强大的纯CSS3动画案例分享
编辑整理 | web前端开发 在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣 ...
最新文章
- mysql init-file参数中语句限制
- ScheduledThreadPoolExecutor的相关知识
- 这些年，我收集的JavaScript代码(二)
- MyBatis增删改示例——MyBatis学习笔记之二
- [原创]基于frida的脱壳工具
- boost::mp11::mp_cond相关用法的测试程序
- 人民邮电出版社图灵公司的两本SQL Server 2005图书诚征译者
- 前端学习（2477）：封装数据接口
- spring-boot-starter-swagger 1.3.0.RELEASE：新增对JSR-303的支持和host的配置
- 又烧一辆！蔚来ES8车库夜里起火 两个半小时才熄灭：现场惨烈
- redis 将key的有效时间设置为不过期命令
- python多线程 _thread没有上lock时程序提前给你把可执行的都执行，不按代码编写顺序执行
- Mysql对数据库操作的简单命令
- selenium ruby和java_针对Ruby的Selenium WebDriver安装指南
- python - class类 (七) 三大特性 - 封装 结尾
- Windows Server 2012 MSDN原版 简体中文 版下载
- 全球免费开放电子图书馆
- 如何删除SceneDelegate
- 动态规划-分苹果：m个苹果，n个盘子的分法个数
- vue项目SEO优化