实现效果如下：主要是为了复习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动画属性复习内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复