摩天轮动画练习
Posted mxblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了摩天轮动画练习相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键字">
<meta name="description" content="简介">
<title>摩天轮动画</title>
<style>
html
width: 100%;
height: 100%;
body
margin: 0;
padding: 0;
width: 100%;
height: 100%;
.skywheel
width: 600px;
height: 600px;
position: relative;
margin: 20px auto 0 auto;
background-image: url(img/sky.png);
animation: sky 8s infinite linear;/* 动画：动画名称 时长 循环 匀速运动 */
margin-top: -1050px;
.people1
width: 109px;
height: 148px;
position: absolute;
top: 80px;
left: 20px;
background-image: url(img/grils.png);
animation: sky2 8s infinite linear;/* 动画：动画名称 时长 循环 匀速运动 */
.people2
width: 109px;
height: 148px;
position: absolute;
top: 500px;
left: 300px;
background-image: url(img/boy.png);
animation: sky2 8s infinite linear; /* 动画：动画名称 时长 循环 匀速运动 */
.people3
width: 109px;
height: 148px;
position: absolute;
left: 490px;
top: 170px;
background-image: url(img/gril.png);
animation: sky2 8s infinite linear;/* 动画：动画名称 时长 循环 匀速运动 */
@keyframes sky
from
transform: rotate(0deg);
to
transform: rotate(360deg);
/*摩天轮动画*/
@keyframes sky2
from
transform: rotate(0deg);
to
transform: rotate(-360deg);
/* 人动画 */
</style>
</head>
<body>
<img src="img/u=733544617,882670619&fm=26&gp=0.jpg" width="100%">
<div class="skywheel">
<div class="people1"></div>
<div class="people2"></div>
<div class="people3"></div>
</div>
</body>
</html>
以上是关于摩天轮动画练习的主要内容，如果未能解决你的问题，请参考以下文章