女朋友生日,我送她网页相册,她感动的哭了(文中有惊喜)

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

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

在这里插入图片描述
那么我是怎么把女朋友感动哭的呢?我们来看看网页相册效果图。

在这里插入图片描述
这里我把女朋友的照片换成了她最喜欢的偶像的照片(保命操作,当时我用的是她的照片),是不是很炫酷呢?

瞬间让女生感动哭了。

在这里插入图片描述
那么是怎么实现的呢,很简单,只需要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>

文件夹结构如下:
在这里插入图片描述
好了,你们也快去把女朋友感动哭吧!!

没有女朋友怎么办?点个赞,明天我给你分配一个。

在这里插入图片描述
不说了,我要去买榴莲了,晚了可能连进去跪榴莲的机会也没有了,大家保重,注意膝盖。

在这里插入图片描述
补充

在这里插入图片描述

微信搜索【web小馆】

回复 【相册】,即可获取 本文相册源码

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

在这里插入图片描述
node后台

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页