某音很火的立方体盒子,约妹必备



某音很火的立方体盒子,约妹必备

作者: cj13888

全网最全的网络资源分享网站

手机扫码查看

标签:

特别声明:本站资源分别为免费资源、查看密码或解压密码资源、三个级别VIP会员资源。本站所有发布的内容都是安全,请放心下载!本站不可能所有资源都可以商业用途,原创或部分除外!如:商业用途请联系原作者购买正版。与本站无关!若侵犯到您的权益,请联系本站删除,我们将及时处理!

分享

最近在某音看到这个旋转立方体相册,感觉很新鲜,就研究了一下,不用JS,纯html+css
之前因为测试连接中带有首页链接,被当推广贴删了,现在重新发布。感谢吾友支持

先看效果链接:http://xiangce.youlinxi.top
请用谷歌浏览器或者其他浏览器的急速内核,IE不支持的
没钱升级服务器,1M带宽,将就着看看吧,不影响功能的,也就多加载一会



首先,国标惯例

<!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);
}

最外面的大圈,按照规律自行添加即可


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

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


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

分享到:
打赏
未经允许不得转载:

作者: cj13888, 转载或复制请以 超链接形式 并注明出处 易启发资源网
原文地址: 《某音很火的立方体盒子,约妹必备》 发布于2020-7-24

评论


切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

某音很火的立方体盒子,约妹必备

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏