欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-05 08:53:00
...

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

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

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

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

瞬间让女生感动哭了。

女朋友生日,我送她网页相册,她感动的哭了(文中有惊喜)
那么是怎么实现的呢,很简单,只需要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全栈工程师,我们下期再见!

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