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

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

用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲_第1张图片

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

还是老规矩,先来效果:


上代码:

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>

需要用到的图片素材,已上传到此链接(贴心吧,哈哈):素材所在链接 提取码72tn

注意:图中悬挂图片是130像素x170像素的,如果想要把自己的图片替换掉上面的图片,用PS调整一下你的图片大小即可。

【附】PS调整图片大小方法:

  1. 打开PS
  2. 把图片拖进来
  3. 点击“裁剪”,然后选择“比例”为130:170,然后按两次回车键,此时裁剪完成
    用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲_第2张图片
  4. 在上方菜单栏选择“图像”,“图像大小”,弹出以下界面。或在键盘上按下快捷键Ctrl+Alt+i,设置为像素格式,宽度130,高度170,点击确定
    用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲_第3张图片
  5. 此时,点击上方菜单栏的“文件”,“存储为…”弹出以下界面进行保存,或按Ctrl+S
    用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲_第4张图片
  6. 图片名对应百度网盘里面素材对应的名字,然后在“保存类型”里面选择JPG格式进行保存,保存到HTML文件能够找到的images文件夹里面
    用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲_第5张图片
  7. 完成
    用html和css为女朋友做了个幸福摩天轮,她很开心,我很骄傲_第6张图片

帮人帮到底,运行不出来或者有问题的小伙伴,欢迎随时打扰哦~

你可能感兴趣的:(CSS)