用html和css为女朋友做了个幸福摩天轮，她很开心，我很骄傲

最新推荐文章于 2021-06-18 14:33:57 发布

huangfuyk

最新推荐文章于 2021-06-18 14:33:57 发布

阅读量1.3w

点赞数 89

分类专栏： CSS 文章标签： html css html5 css3 前端

本文链接：https://blog.csdn.net/weixin_42881768/article/details/105799649

版权

CSS 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

根据这段时间的博客访问量来看，我判断出写一些小玩意非常受欢迎，那也就是说，有很多人喜欢这些东西，写这个东西能帮助到一部分人，无论他们是拿来学习也好，做一个送人也好，都是有意义的。由此推出，我并不是为了那些可有可无的访问量来的。

在这里插入图片描述

刚好你喜欢，刚好我会做，所以很希望能够一如既往的帮到那些可爱的同志们。

还是老规矩，先来效果：

在这里插入图片描述
上代码：

在这里插入图片描述

html部分：

<body>
	<div class="box">
		<div class="wheel">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		<div class="bracket"></div>
		<div class="bracketsmall"></div>
		<div class="bigtitle"></div>
		<div class="title"></div>
		<div class="arrow"></div>
	</div>
</body>

css部分：

<style>
*{
	margin:0px;
	padding: 0px;
}
body{
	background: url("images/2.jpg");
	background-size: cover;
	background-position: center center;
}
.box{
	/*border:solid 1px red;*/
	width: 1000px;
	height: 1000px;
	margin:0px auto;
	position: relative;
}
.wheel{
	background: url("images/fsw.png");
	height:768px;
	width: 768px;
	margin: 0px auto;
	-webkit-animation:wheelrotation 10s linear infinite;
	position: relative;
}
.wheel li{
	border-radius: 20px;
}
.bracket{
	width: 358px;
	height: 529px;
	background: url("images/bracket.png") no-repeat;
	position: absolute;
	left:318px;
	top:375px;
}
.bracketsmall{
	width: 247px;
	height: 505px;
	background: url("images/bracketsmall.png") no-repeat;
	position: absolute;
	left:375px;
	top:382px;
	z-index:-2;
}
.bigtitle{
	width: 577px;
	height: 257px;
	position: absolute;
	left: 212px;
	top: 269px;
	background-image: url("images/big-title.png");
}
.arrow{
	width: 48px;
	height: 64px;
	position: absolute;
	left: 482px;
	top: 550px;
	background: url("images/arrow.png") no-repeat;
}
ul{
	list-style: none;
}
li{
	height:170px;
	width: 130px;
	position: absolute;
	-webkit-animation:childrotation 10s linear infinite;
	-webkit-transform-origin:50% 0;
}
li:nth-child(1){
	background: url("images/1.jpg");
	left: 330px;
	top:0px;
}
li:nth-child(2){
	background: url("images/3.jpg");
	left: 594px;
	top:125px;
}
li:nth-child(3){
	background: url("images/4.jpg");
	left: 694px;
	top:370px;
}
li:nth-child(4){
	background: url("images/5.jpg");
	left: 594px;
	top:650px;
}
li:nth-child(5){
	background: url("images/6.jpg");
	left: 330px;
	top:740px;
}
li:nth-child(6){
	background: url("images/7.jpg");
	left: 94px;
	top:640px;
}
li:nth-child(7){
	background: url("images/8.jpg");
	left: -6px;
	top:370px;
}
li:nth-child(8){
	background: url("images/9.jpg");
	left: 94px;
	top:125px;
}
@-webkit-keyframes wheelrotation{
	0%{
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(360deg);
	}
}
@-webkit-keyframes childrotation{
	0%{
		-webkit-transform:rotate(0deg);
	}
	100%{
		-webkit-transform:rotate(-360deg);
	}
}
</style>