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

最新推荐文章于 2024-03-07 16:46:41 发布

你的美，让我痴迷

最新推荐文章于 2024-03-07 16:46:41 发布

阅读量721

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_45932157/article/details/114641782

版权

css 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

html

23 篇文章 1 订阅

订阅专栏

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

效果图：

在这里插入图片描述
图片下载地址：https://download.csdn.net/download/weixin_45932157/15711147

你的美，让我痴迷

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html+Css3实现一个摩天轮特效

<!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-r
复制链接

扫一扫