HTML5 超酷的摩天轮转动动画

TAG：CSS3动画　时间：2018-06-02　浏览：
HTML5 超酷的摩天轮转动动画，摩天轮并不是由HTML5绘制出来的，而是调用了一些图片，吊车也是用的图片，因为本特效主要是演示CSS3的动画控制能力，摩天轮的旋转、吊车的摇摆等，而且还要对吊车的轨迹进行控制，始终确保吊车跟随摩天轮转动，并保持在摩天轮的固定位置显示。请运行代码查看效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3超炫酷的摩天轮动画-开源爱好者：www.codesc.net </title>
<style>
div.lanren{
	margin: 100px auto;
	width: 800px;
	animation: a 1000s;
	position: relative;
}
img:nth-child(2){
	position: absolute;
	top: 80px;
	left: 400px;
	animation: b 1000s;
	transform-origin:top center;
}
img:nth-child(3){
	position: absolute;
	top: 700px;
	left: 400px;
	animation: b 1000s;
	transform-origin:top center;
}
img:nth-child(4){
	position: absolute;
	top: 300px;
	left: 0px;
	animation: b 1000s;
	transform-origin:top center;
}
@keyframes a{
	form{transform: rotate(0deg)}
	to{transform: rotate(36000deg)}
}
@keyframes b{
	form{transform: rotate(0deg)}
	to{transform: rotate(-36000deg)}
}
</style>
</head>
<body>
<div class="lanren">
	<img src="/jscode/demoimg/201803/fsw.png">
	<img src="/jscode/demoimg/201803/boy.png">
	<img src="/jscode/demoimg/201803/girl.png">
	<img src="/jscode/demoimg/201803/shamegirl.png">
</div>
HTML5 超酷的摩天轮转动动画，摩天轮并不是由HTML5绘制出来的，而是调用了一些图片，吊车也是用的图片，因为本特效主要是演示CSS3的动画控制能力，摩天轮的旋转、吊车的摇摆等，而且还要对吊车的轨迹进行控制，始终确保吊车跟随摩天轮转动，并保持在摩天轮的固定位置显示。请运行代码查看效果。
</body>
</html>

HTML5 超酷的摩天轮转动动画

相关特效代码

网页特效下载区