摩天轮动画实现-优快云博客

运行效果：

代码编写：

<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>motianlun</title>
    <link href="~/摩天轮/css.css" rel="stylesheet" />
</head>
<body>
    <div>
        <img src="~/摩天轮/images/fsw.png">
        <img src="~/摩天轮/images/boy.png">
        <img src="~/摩天轮/images/girl.png">
        <img src="~/摩天轮/images/shamegirl.png" />
    </div>


</body>
</html>

css插件：

div{
		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)}
	}

需要的图片：