摘要:本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation steps制作饿了么loading,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation steps制作饿了么loading,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
.load2 {
position: absolute;
width:200px;
height:160px;
background: url(‘data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZWxsaXBzZSBjeD0iNDgiIGN5PSIxMi40NjMiIGZpbGw9IiNEM0U2RkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjQ3Ljg5IiByeT0iMTIuMzY5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyIDM4KSIvPjwvc3ZnPg==‘) no-repeat;
margin-left:-96px;
margin-top:-100px;
left:50%;
top:70%;
animation:small .8s infinite;
background-position: center;
}
@keyframes small {
0% {
transform: scale(1);
}
50% {
transform: scale(.4);
}
100% {
transform: scale(1);
}
}
.load {
position: absolute;
left:50%;
top:50%;
background: url(‘loading.png‘);
height:100px;
width:100px;
margin-left:-50px;
margin-top:-50px;
animation:test 4.5s steps(6) infinite,updown .8s infinite;
/*-webkit-animation:test 3.5s steps(6) infinite;*/
}
@keyframes test {
0% {
background-position: 0 0;
}
100% {
background-position: 0 600px;
}
}
@keyframes updown{
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0px);
}
}
</style>
<div></div>
<div></div>
</div>
</body>
</html>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号