女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）

程序员文章站 2022-04-10 09:09:00

导语：女朋友最近生日，我作为浪漫（搞事）专家，怎么能不弄点惊喜呢？于是我的这一件礼物，直接把女朋友感动哭了。我和女朋友的甜蜜聊天对话！！那么我是怎么把女朋友感动哭的呢？我们来看看网页相册效果图。这里我把女朋友的照片换成了她最喜欢的偶像的照片（保命操作，当时我用的是她的照片），是不是很炫酷呢？瞬间让女生感动哭了。那么是怎么实现的呢，很简单，只需要html和css就行了，代码直接给你们，换一下图片就行了。

导语：
女朋友最近生日，我作为浪漫（搞事）专家，怎么能不弄点惊喜呢？于是我的这一件礼物，直接把女朋友感动哭了。

我和女朋友的甜蜜聊天对话！！

女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）
那么我是怎么把女朋友感动哭的呢？我们来看看网页相册效果图。

女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）
这里我把女朋友的照片换成了她最喜欢的偶像的照片（保命操作，当时我用的是她的照片），是不是很炫酷呢？

瞬间让女生感动哭了。

女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）
那么是怎么实现的呢，很简单，只需要html和css就行了，代码直接给你们，换一下图片就行了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> 
<title>把女朋友感动哭的相册</title> 
<style type="text/css"> html {
	width:100%;
	height:100%;
}
.bigbox {
	width:10px;
	height:10px;
	margin:200px 400px;
	position:relative;
}
.box {
	width:500px;
	height:300px;
	margin:0 auto;
	transform-style:preserve-3d;
	transform:rotateX(-30deg) rotateY(-80deg);
	-webkit-animation:mystyle 15s infinite;
	animation-timing-function:linear;
}
@-webkit-keyframes mystyle {
	from {
	transform:rotateX(-180deg) rotateY(-180deg);
}
to {
	transform:rotateX(180deg) rotateY(180deg);
}
}.box div {
	position:absolute;
	width:200px;
	height:200px;
	opacity:0.8;
	transition:all .4s;
}
.bigpic {
	width:200px;
	height:200px;
}
.box .bigfront {
	transform:rotateY(0deg) translateZ(100px);
}
.box .bigback {
	transform:translateZ(-100px) rotateY(180deg);
}
.box .bigleft {
	transform:rotateY(90deg) translateZ(100px);
}
.box .bigright {
	transform:rotateY(-90deg) translateZ(100px);
}
.box .bigtop {
	transform:rotateX(90deg) translateZ(100px);
}
.box .bigbottom {
	transform:rotateX(-90deg) translateZ(100px);
}
.box span {
	display:block;
	position:absolute;
	width:140px;
	height:140px;
	top:25px;
	left:25px;
}
.box .smallpic {
	width:140px;
	height:140px;
}
.box .smallleft {
	transform:rotateY(90deg) translateZ(70px);
}
.box .smallright {
	transform:rotateY(-90deg) translateZ(70px);
}
.box .smalltop {
	transform:rotateX(90deg) translateZ(70px);
}
.box .smallbottom {
	transform:rotateX(-90deg) translateZ(70px);
}
.box .smallfront {
	transform:rotateY(0deg) translateZ(70px);
}
.box .smallback {
	transform:translateZ(-70px) rotateY(180deg);
}
/*:hover 我们之前说过的一个css选择器，能够让鼠标指向的时候触发*/ .box:hover .bigleft {
	transform:rotateY(90deg) translateZ(300px);
}
.box:hover .bigright {
	transform:rotateY(-90deg) translateZ(300px);
}
.box:hover .bigtop {
	transform:rotateX(90deg) translateZ(300px);
}
.box:hover .bigbottom {
	transform:rotateX(-90deg) translateZ(300px);
}
.box:hover .bigfront {
	transform:rotateY(0deg) translateZ(300px);
}
.box:hover .bigback {
	transform:translateZ(-300px) rotateY(180deg);
}
</style> 
</head> 
<body> 
<div class="bigbox"> 
<div class="box"> 
<div class="bigfront"> 
<img src="image/1.jpg" class="bigpic" > 
</div> <div class="bigback"> <img src="image/2.jpg" class="bigpic"> </div> 
<div class="bigleft"> <img src="image/3.jpg" class="bigpic"> </div> 
<div class="bigright"> <img src="image/4.jpg" class="bigpic"> </div> 
<div class="bigtop"> <img src="image/5.jpg" class="bigpic"> </div> 
<div class="bigbottom"> <img src="image/6.jpg" class="bigpic"> </div> 
<span class="smallfront"> <img src="image/7.jpg" class="smallpic" /> </span> 
<span class="smallback"> <img src="image/8.jpg" class="smallpic" /> </span> 
<span class="smallleft"> <img src="image/9.jpg" class="smallpic" /> </span> 
<span class="smallright"> <img src="image/10.jpg" class="smallpic" /> </span> 
<span class="smalltop"> <img src="image/11.jpg" class="smallpic" /> </span> 
<span class="smallbottom"> <img src="image/12.jpg" class="smallpic" /> </span> 
</div> 
</div> 
</body> 
</html>

文件夹结构如下：

女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）
好了，你们也快去把女朋友感动哭吧！！