DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

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

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

  • 已被浏览: 18
  • 导语:女朋友最近生日,我作为浪漫(搞事)专家,怎么能不弄点惊喜呢?于是我的这一件礼物,直接把女朋友感动哭了。我和女朋友的甜蜜聊天对话!!那么我是怎么把女朋友感动哭的呢?我们来看看网页相册效果图。这里我把女朋友的照片换成了她最喜欢的偶像的

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

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

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

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

    瞬间让女生感动哭了。

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

    TAG:文中 送她 女朋友

  • 上一篇:B站微服务框架Kratos详细教程(2)
  • 与“女朋友生日,我送她网页相册,她感动的哭了(文中有惊喜)”相关的资讯
  • 阿里云制作加密情书送给女朋友
  • 早点下班陪女朋友系列之Mybatis
  • 如何做一个网页送给女朋友做生日礼物