概述
实现效果如下：主要是为了复习animation属性，简单用三张图片(图片素材太难找了）实现了动画效果，背景山，人物和熊都会按照固定频率运动
接下来附上代码
style样式（因为样式代码不多，就没有另外开一个.css文件，直接在html页面里面写了
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.figure {
width: 80px;
height: 91px;
background: url("images/zouLu1.png") no-repeat;
background-position: 0, 0;
animation: play 1s steps(8) infinite;
margin: 0 auto;
margin-top: 500px;
}
.bear {
position: absolute;
left: 0;
bottom: 20px;
width: 200px;
height: 100px;
background: url("images/bear.png") no-repeat;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: bear 1s steps(8) infinite, move 6s forwards;
}
.beijin {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 336px;
background: url("images/bg1.png") no-repeat;
animation: bear 10s linear infinite;
z-index: -1;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
@keyframes play {
0% {
background-position: 0, 0;
}
100% {
background-position: -640px 0;
}
}
</style>HTML代码 （这个就没有什么内容了，因为是主要是复习animation的使用，所以就简单的用了三个div盒子
<body>
<div class="figure">
</div>
<div class="bear">
</div>
<div class="beijin">
</div>
</body>最后
以上就是大胆发夹为你收集整理的简单实现一个动画首页-animition动画属性复习的全部内容，希望文章能够帮你解决简单实现一个动画首页-animition动画属性复习所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复