摩天轮

来源：互联网发布：日程表软件编辑：程序博客网时间：2024/04/28 01:16

运行效果：

代码编写：

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

需要的图片：

0 0