摩天轮动画练习

最新推荐文章于 2021-11-22 00:29:44 发布

dengfu6298

最新推荐文章于 2021-11-22 00:29:44 发布

阅读量371

点赞数

原文链接：http://www.cnblogs.com/mxblogs/p/11172959.html

版权

<!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>

转载于:https://www.cnblogs.com/mxblogs/p/11172959.html