易启发资源网一个让你成为创客的知识源泉,一个让你梦想成真的家园。
某音很火的立方体盒子相册,约妹必备呀~~
  • 首页 > 技术教程 > 经验教程
  • 作者:陈家二公子
  • 2019年12月5日 9:15 星期四
  • 浏览:40
  • 字号:
  • 评论:0
  • 最近在某音看到这个旋转立方体相册,感觉很新鲜,就研究了一下,不用JS,纯html+css
    先看效果:http://xiangce.youlinxi.top/ceshi.html
    请用谷歌浏览器或者其他浏览器的急速内核,IE不支持的
    没钱升级服务器,1M带宽,将就着看看吧,不影响功能的,也就多加载一会

    要图的,看这里

    1.png

    2.png

    首先,国标惯例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>佑霖兮之家</title>
     
    <link rel="stylesheet" href="css/xiangce.css" />
    </head>

    最后一行调用css
    然后开始写页面内容
    第一步,先做一个大锅

    <div class="wrap"></div>

    第二步,开始往大锅里放东西,立方体有6个面,所以需要6个图

    <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                    <img src="img/1.jpg"  class="pic" >
            </div>
            <!--后面图片 -->
            <div class="out_back">
                    <img src="img/2.jpg"  class="pic">
            </div>
            <!--左图片 -->
            <div class="out_left">
                    <img src="img/3.jpg"  class="pic">
            </div>
            <div class="out_right">
                    <img src="img/4.jpg"  class="pic">
            </div>
            <div class="out_top">
                    <img src="img/5.jpg"  class="pic">
            </div>
            <div class="out_bottom">
                    <img src="img/6.jpg"  class="pic">
            </div>

    题目既然是嵌套,那有大也要有,下面就开始做小的,依然6张图

    <span class="in_front">
                    <img src="img/7.jpg" class="in_pic" />
            </span>
            <span class="in_back">
                     <img src="img/8.jpg" class="in_pic" />
            </span>
            <span class="in_left">
                    <img src="img/9.jpg" class="in_pic" />
            </span>
            <span class="in_right">
                    <img src="img/10.jpg" class="in_pic" />
            </span>
            <span class="in_top">
                    <img src="img/11.jpg" class="in_pic" />
            </span>
            <span class="in_bottom">
                    <img src="img/12.jpg" class="in_pic" />
            </span>


    到这里,页面显示已经做完了,可能有吾友会说,咦,这不行呀
    我说,不行是肯定的,做锅 的时候,忘记把锅放进世界了.

    <body></body>

    锅放进去,是不是就行了呢。答案是肯定的,肯定不行啊,都说了是HTML+CSS了,这还没见css呢

    接下来放CSS,国际惯例,先加背景

    html{
            background:black;
        height: 100%;        
    }

    背景加完之后,那么就要和页面对应了,弄个大锅,这里就要把锅是什么样的给弄好,具体要多大的锅,锅怎么,怎么什么的

    .wrap{
            width: 10px;
            height: 10px;
            /*改变左右上下,图片方块移动*/
            margin: 200px 400px;
            position: relative;
             
    }
    /*包裹所有容器样式*/
    .cube{
            width:600px;
            height:400px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            -webkit-animation: rotate 20s infinite;
            /*匀速*/
            animation-timing-function: linear;
    }
    @-webkit-keyframes rotate{
            from{transform: rotateX(0deg) rotateY(0deg);}
            to{transform: rotateX(360deg) rotateY(360deg);}
    }
    .cube div{
            position: absolute;
            width: 300px;
            height: 300px;
            opacity: 0.8;
            transition: all .4s;

    锅设置好了,然后设置外侧的照片

    .pic{
            width: 300px;
            height: 300px;
    }
    .cube .out_front{
            transform: rotateY(0deg) translateZ(150px);
    }
    .cube .out_back{
            transform: translateZ(-150px) rotateY(180deg);
    }
    .cube .out_left{
            transform: rotateY(90deg) translateZ(150px);
    }
    .cube .out_right{
            transform: rotateY(-90deg) translateZ(150px);
    }
    .cube .out_top{
            transform: rotateX(90deg) translateZ(150px);
    }
    .cube .out_bottom{
            transform: rotateX(-90deg) translateZ(150px);
    }


    外侧大方框弄完,弄里面的小方框

    .cube span{
            display: bloack;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 50px;
    }
    .cube .in_pic{
            width: 200px;
            height: 200px;
    }
    .cube .in_front{
            transform: rotateY(0deg) translateZ(100px);
    }
    .cube .in_back{
            transform: translateZ(-100px) rotateY(180deg);
    }
    .cube .in_left{
            transform: rotateY(90deg) translateZ(100px);
    }
    .cube .in_right{
            transform: rotateY(-90deg) translateZ(100px);
    }
    .cube .in_top{
            transform: rotateX(90deg) translateZ(100px);
    }
    .cube .in_bottom{
            transform: rotateX(-90deg) translateZ(100px);
    }

    呼~~~终于写完了

    咦不对,这大框包着小框,看不见小框的东西啊,怎么办?弄个变形

    .cube:hover .out_front{
            transform: rotateY(0deg) translateZ(400px);
    }
    .cube:hover .out_back{
            transform: translateZ(-400px) rotateY(180deg);
    }
    .cube:hover .out_left{
            transform: rotateY(90deg) translateZ(400px);
    }
    .cube:hover .out_right{
            transform: rotateY(-90deg) translateZ(400px);
    }
    .cube:hover .out_top{
            transform: rotateX(90deg) translateZ(400px);
    }
    .cube:hover .out_bottom{
            transform: rotateX(-90deg) translateZ(400px);
    }


    到此结束。感谢各位观众朋友的细心品尝。

    至于你还要问,纳尼,照片呢?怎么没有说照片
    哎,对于比我还小白的,我很能体会你的心情,我当初也是这样的,那就看下图


    3.png



    img 文件夹放图片,12张,编号为1、2....11.12
    这下行了,你还有别的要问么?






      您阅读这篇文章共花了:  
     本文无需标签!
    二维码加载中...
    本文作者:陈家二公子      文章标题: 某音很火的立方体盒子相册,约妹必备呀~~
    本文地址:http://www.1316178.com/post-863.html
    版权声明:若无注明,本文皆为“易启发资源网”原创,转载请保留文章出处。

    版权所有:《易启发资源网
    文章标题:《某音很火的立方体盒子相册,约妹必备呀~~
    除非注明,文章均为 《易启发资源网》 原创
    转载请注明本文短网址:http://www.1316178.com/post-863.html  [生成短网址]

    返回顶部| 首页| 手气不错| 捐赠支持| 留言板| 自定义链接| 自定义链接| sitemap| 手机版本|后花园

    Copyright © 2017-2018 易启发资源网   粤ICP备18033131号-4

    2. 3.