脚步加载效果-CSS3

最近项目上有这样一个需求，该项目的加载页需要有像踩雪一样的动作，像这样子。

嗯哼，它到底是怎么踩得？首先将这4个脚印的图片以及动作分解，它的动作其实就是我踩、我收、我再踩、我再收…

步骤1：

首先我们需要绘制一个盒子来装该4四张图片（这里有一个小技巧就是4张图片的大小和该盒子的大小一样大，空白区域背景透明，再通过定位实现四张图片错位重叠）
初步样子:

步骤2：

动画效果可以用CSS3中的透明度切换(opacity的0和1)、dispaly的none和block、或者利用缩放(scale中的0和1), 每一个脚印再设置响应的动画延迟就实现啦!
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet"  href="./footer.css" /></head>
<body><div class="box"><div class="step1"></div><div class="step2"></div><div class="step3"></div><div class="step4"></div></div>
</body>
</html>

css代码

.box {width: 118px;height: 113px;margin: 0 auto;background-color: #000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%) ;-webkit-transform:translate(-50%,-50%) ;-moz-transform:translate(-50%,-50%) ;-ms-transform:translate(-50%,-50%) ;-o-transform:translate(-50%,-50%) ;
}
.box div {width: 118px;height: 113px;position: absolute;transform: scale(0); animation: 1600ms loading infinite;-webkit-animation: 1600ms loading infinite;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);background-color: red;}.box div:nth-child(1) {background: url("./image/step1.png");}.box div:nth-child(2) {background: url("./image/step2.png"); animation-delay: 200ms;
}.box div:nth-child(3) {background: url("./image/step3.png");animation-delay: 400ms;
}.box div:nth-child(4) {background: url("./image/step4.png"); animation-delay: 600ms;
}@keyframes loading {0% {-webkit-transform: scale(1);transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);}50% {-webkit-transform: scale(1);transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);}50.5% {-webkit-transform: scale(0);transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);}100% {-webkit-transform: scale(0);transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);}
}

再把大脚丫的图一并附上（由于是背景透明脚丫纯白，需要小伙伴下载加个背景色才能看清哟）

脚步加载效果-CSS3相关推荐

html动画加载效果,CSS3 实现 Loading（加载）动画效果
看到不少 App 下拉刷新时,都有加载动画,于是,也想给微信小程序加一个动画特效.正好,这里有不少纯 CSS3 实现的动画效果. Loading 动画效果 HTML代码 CSS代码 .spinner ...
python画菊花_使用css3实现小菊花加载效果
使用css3实现小菊花加载效果最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意去等待.而页面中最常用的做法是把动画做成gif格式,当做背景图或是img ...
html 增加等待状态,html5--等待加载效果
等待载入你的浏览器不支持canvas var wait = document.getElementById('wait').getContext('2d'); wait.fillRect(0,0,1 ...
重新创建“ Design Samsung”网格加载效果
View demo 查看演示 Download Source 下载源 If you already come across the Samsung Corporate Design Center, y ...
layui的几个简单使用(简单弹窗,加载效果,移除加载效果)
1.加载效果和移除加载效果 function layuiLoading(msg){layui.use(['layer', 'form'], function(){index = layer.load( ...
Jquery页面加载效果
1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false).本文地址:http://www.cnblo ...
如何让页面停止加载_Axure 案例：数值加载效果
今天要说到的数值加载效果,我们在使用App和网站的时候是经常见到的,尤其是金融类的产品.借贷类的产品等. 在我们打开某个页面,比如我的财富时,账户当中的金额会进行不断往上叠加,直到叠加到账户中的金额数 ...
swiper 上滑触发_四种方式快速实现上滑触底加载效果
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下述效果的上拉加载,我们需要如何去做. 以下是为大家总结 ...
jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...

脚步加载效果-CSS3

步骤1：

步骤2：

脚步加载效果-CSS3相关推荐

最新文章

热门文章