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

时间 2020-09-14 标签女友生日送网页相册感动哭了文中惊喜

导语：
女友最近生日，我做为浪漫（搞事）专家，怎么能不弄点惊喜呢？因而个人这一件礼物，直接把女友感动哭了。css

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

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

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

瞬间让女生感动哭了。web

那么是怎么实现的呢，很简单，只须要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>

文件夹结构以下：

好了，大家也快去把女友感动哭吧！！svg

没有女友怎么办？点个赞，明天我给你分配一个。spa

不说了，我要去买榴莲了，晚了可能连进去跪榴莲的机会也没有了，你们保重，注意膝盖。3d

补充：code

微信搜索【web小馆】

回复 【相册】，便可获取 本文相册源码。

回复 【全栈博客项目】，便可获取项目源码和后续的实战文章教程。
天天用最简单朴实的语言，潜移默化的提高你的计算机基础知识和前端技术。小米粥，一个专一的web全栈工程师，咱们下期再见！