Html+Css3实现一个摩天轮特效

左手的ㄟ右手 2022-11-07 01:53 155阅读 0赞

<!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>标题</title>
    	<meta name="keywords" content="">
    	<meta name="description" content="">
    	<style>
    		body{ 
    			background: url(./mtlImg/2.jpg) no-repeat;
    		}
    		.wheel-box{ 
    			width: 1090px;
    			height: 1090px;
    			margin: 0 auto;
    			position: relative;
    		}
    		.wheel{ 
    			position: relative;
    			width: 768px;
    			height: 768px;
    			margin: 0 auto;
    			background: url(./mtlImg/fsw.png) no-repeat;
    			z-index: 10;
    			-webkit-animation:rotate 6s linear infinite;
    			-moz-animation:rotate 6s linear infinite;
    			animation:rotate 6s linear infinite;
    		}
    		@-webkit-keyframes rotate{ 
    			0%{ 
    				-webkit-transform:rotate(0deg);
    				-moz-transform:rotate(0deg);
    				transform:rotate(0deg);
    			}
    			100%{ 
    				-webkit-transform:rotate(360deg);
    				-moz-transform:rotate(360deg);
    				transform:rotate(360deg);
    			}
    		}
    		.wheel img{ 
    			position: absolute;
    			/*display: block;*/
    			width: 130px;
    			height: 170px;
    			-webkit-transform-origin:50% 0;
    			-moz-transform-origin:50% 0;
    			transform-origin:50% 0;
    			
    			-webkit-animation:rotatechild 6s linear infinite;
    			-moz-animation:rotatechild 6s linear infinite;
    			animation:rotatechild 6s linear infinite;
    		}
    		@-webkit-keyframes rotatechild{ 
    			0%{ 
    				-webkit-transform:rotate(0deg);
    				-moz-transform:rotate(0deg);
    				transform:rotate(0deg);
    			}
    			100%{ 
    				-webkit-transform:rotate(-360deg);
    				-moz-transform:rotate(-360deg);
    				transform:rotate(-360deg);
    			}
    		}
    		.wheelpicfour{ 
    			top:28px;
    			left:320px;
    		}
    		.wheelpicseven{ 
    			top:130px;
    			left:575px;
    		}
    		.wheelpictwo{ 
    			top:380px;
    			left:672px;
    		}
    		.wheelpicsix{ 
    			top:633px;
    			left:577px;
    		}
    		.wheelpicone{ 
    			top:740px;
    			left:326px;
    		}
    		.wheelpicfive{ 
    			top:638px;
    			left:74px;
    		}
    		.wheelpicthree{ 
    			top:386px;
    			left:-34px;
    		}
    		.wheelpiceight{ 
    			top:130px;
    			left:70px;
    		}
    		.jia{ 
    			position:absolute;
    			display:block;
    			top:382px;
    			left:350px;
    			width:358px;
    			height:529px;
    			background:url(./mtlImg/bracket.png);
    			z-index:9;
    		}
    		.jiasmall{ 
    			position:absolute;
    			display:block;
    			top:407px;
    			left:410px;
    			width:247px;
    			height:505px;
    			background:url(./mtlImg/bracketsmall.png);
    			z-index:7;
    		}
    		.wheel-box dl{ 
    			position:absolute;
    			top:235px;
    			left:261px;
    			width:577px;
    			height:380px;
    			z-index:10;
    		}
    		.wheel-box dt{ 
    			float:left;
    			width:577px;
    			height:277px;
    			background:url(./mtlImg/big-title.png) no-repeat;
    		}
    		.wheel-box dd h1{ 
    			position:absolute;
    			top:215px;
    			left:82px;
    			width:413px;
    			height:139px;
    			background:url(./mtlImg/title.png) no-repeat;
    			z-index:2;
    		}
    		.wheel-box dd span{ 
    			position:absolute;
    			top:284px;
    			left:280px;
    			width:48px;
    			height:64px;
    			background:url(./mtlImg/arrow.png) no-repeat;
    			z-index:3;
    		}
    	</style>
    </head>
    <body>
    	<div class="wheel-box">
            <div class="wheel">
                <img class="wheelpicone" src="./mtlImg/boy.png">
                <img class="wheelpictwo" src="./mtlImg/dog.png">
                <img class="wheelpicthree" src="./mtlImg/girl.png">
                <img class="wheelpicfour" src="./mtlImg/girls.png">
                <img class="wheelpicfive" src="./mtlImg/hairboy.png">
                <img class="wheelpicsix" src="./mtlImg/mimi.png">
                <img class="wheelpicseven" src="./mtlImg/mudog.png">
                <img class="wheelpiceight" src="./mtlImg/shamegirl.png">
            </div>
            <span class="jia"></span>
            <span class="jiasmall"></span>
            <dl>
                <dt></dt>
                <dd>
                    <h1></h1>
                    <span></span>
                </dd>
            </dl>
        </div>
    </body>
    </html>

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
图片下载地址：[https://download.csdn.net/download/weixin\_45932157/15711147][https_download.csdn.net_download_weixin_45932157_15711147]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221023/e36bab3fd2024664b99f2ac986eaffaa.png
[https_download.csdn.net_download_weixin_45932157_15711147]: https://download.csdn.net/download/weixin_45932157/15711147