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

更新时间:2023-04-07 14:18:09 阅读：评论：0

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

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

那么我是怎么把女朋友感动哭的呢？我们来看看网页相册效果图。

这里我把女朋友的照片换成了她最喜欢的偶像的照片（保命操作，当时我用的是她的照片），是不是很炫酷呢？

瞬间让女生感动哭了。

那么是怎么实现的呢，很简单，只需要html和css就行了，代码直接给你们，换一下图片就行了。

<!DOCTYPE html> <html> <head> <meta chart="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;t成人动画片小游戏ransform-style:prerve-3d;transform:rotateX(-30deg) rotateY(-80deg);-webkit-animation:mystyle 15s infinite;animation-timing-function:linear;}@-webkit-keyframes mystyle {from {transform:rotateX(-180deg) rotate伯克利音乐学校Y(-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 .bigfr现代诗仿写ont {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" c红楼梦好段lass="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" /> &l地震小常识t;/span> <span class="smallbottom"> <img src="image/12.jpg" class="smallpic" /> </span> </div> </div> </body> </html>

文件夹结构如下：

好了，你们也快去把女朋友感动哭吧！！