[HTML]立方体动态照片墙，给女孩子表白拿去用吧

首先准备12张照片
照片要求：
1、比例都为1:1
2、大照片6张，像素400x400
3、小照片6张，像素100x100
4、大照片命名为1.png、2.png……
5、小照片命名为01.png、02.png……
6、照片全部放入img文件夹中

然后创建以下文件和文件夹：

在css文件夹下创建一个.css文件：

1、.html文件内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>（标题）</title><link type="text/css" href="css/xxx.css" rel="stylesheet" /></head><body><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></body>
</html>

2、.css文件内容

@charset "utf-8";
*{margin:0;padding:0;
}body
{max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: auto;margin-right: auto;
}li
{list-style: none;
}.box
{width:200px;height:200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size:100% 100%;position: absolute;margin-left: 42%;margin-top: 22%;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(13deg);-webkit-animation:move 5s linear infinite;
}.minbox
{width:100px;height:100px;position: absolute;left:50px;top:30px;-webkit-transform-style:preserve-3d;
}.minbox li
{width:100px;height:100px;position: absolute;left:0;top:0;
}.minbox li:nth-child(1)
{background: url(../img/01.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}.minbox li:nth-child(2)
{background: url(../img/02.png) no-repeat 0 0;-webkit-transform:rotateX(180deg) translateZ(50px);
}.minbox li:nth-child(3)
{background: url(../img/03.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);
}.minbox li:nth-child(4)
{background: url(../img/04.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);
}.minbox li:nth-child(5)
{background: url(../img/05.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}.minbox li:nth-child(6)
{background: url(../img/06.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px);
}.maxbox li:nth-child(1)
{background: url(../img/1.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}.maxbox li:nth-child(2)
{background: url(../img/2.png) no-repeat 0 0;-webkit-transform:translateZ(50px);
}.maxbox li:nth-child(3)
{background: url(../img/3.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);
}.maxbox li:nth-child(4)
{background: url(../img/4.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);
}.maxbox li:nth-child(5)
{background: url(../img/5.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px);
}.maxbox li:nth-child(6)
{background: url(../img/6.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px);
}.maxbox
{width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;
}.maxbox li
{width: 200px;height: 200px;background: #fff;border:1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition:all 1s ease;
}.maxbox li:nth-child(1)
{-webkit-transform:translateZ(100px);
}.maxbox li:nth-child(2)
{-webkit-transform:rotateX(180deg) translateZ(100px);
}.maxbox li:nth-child(3)
{-webkit-transform:rotateX(-90deg) translateZ(100px);
}.maxbox li:nth-child(4)
{-webkit-transform:rotateX(90deg) translateZ(100px);
}.maxbox li:nth-child(5)
{-webkit-transform:rotateY(-90deg) translateZ(100px);
}.maxbox li:nth-child(6)
{-webkit-transform:rotateY(90deg) translateZ(100px);
}.box:hover ol li:nth-child(1)
{-webkit-transform:translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}.box:hover ol li:nth-child(2)
{-webkit-transform:rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}.box:hover ol li:nth-child(3)
{-webkit-transform:rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}.box:hover ol li:nth-child(4)
{-webkit-transform:rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}.box:hover ol li:nth-child(5)
{-webkit-transform:rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}.box:hover ol li:nth-child(6)
{-webkit-transform:rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;
}@keyframes move
{0%{-webkit-transform: rotateX(13deg) rotateY(0deg);}100%{-webkit-transform:rotateX(13deg) rotateY(360deg);}
}

[HTML]立方体动态照片墙，给女孩子表白拿去用吧相关推荐

帮我写一篇向女孩子表白的情书
好的,我将尽力帮助你写一篇向女孩子表白的情书. 亲爱的女孩子: 我想写信给你,因为我想告诉你我对你的感情.我不知道你是否也喜欢我,但我决定冒险告诉你我的心意. 我们相识已经有一段时间了,但是我一直在心 ...
怎么向心爱的女孩子表白？
向心爱的女孩子表白是非常需要勇气的事情,因为你不知道对方会有什么样的回应.但是,如果你真的很喜欢她,并且想要给自己一个机会,那么就应该勇敢地向她表白. 首先,你可以考虑在较为私密的场合,如单独见面或者 ...
python烟花表白引大火_代码实现女孩子表白烟花效果~让你快速撩妹！
原标题:代码实现女孩子表白烟花效果~让你快速撩妹! 效果图实现代码 String path = request.getContextPath(); String basePath = request ...
程序员撩妹专用~~~好看的H5立方体创意相册,资源免费!!!程序员送给女孩子的礼物,非常适合送给小姐姐!
H5立方体程序员送给女孩子的礼物,非常适合送给小姐姐!程序员撩妹专用~~~ 预览GIF: 代码详情 <html><head><title>H5立方</titl ...
用css html JavaScript 写一个圣诞表白程序，要求功能多样，复杂，花哨，女孩子没有抵抗力...
好的,我来为您编写一个圣诞表白的程序. 首先,我们可以使用 HTML 来创建网页的结构.我们可以使用一个 div 元素来包含整个程序,并使用几个 p 元素来显示文本. 然后,我们可以使用 CSS 来美 ...
关于女孩子日记本的最新动态
很多网友都问我[女孩子日记本]的一些情况,这里我把它的最新情况说明一下. 1.女孩子日记本是我编写的一款日记本软件,现在最新版本是1.7版,天空的下载地址是http://www4.skycn.com/ ...
学计算机的男孩子怎么追女孩子,男孩子追女孩子的套路，原来有这么多，快来学一学...
导语你有没有喜欢的女孩子呢?那有没有跟她表白呢?或者有没有追到手呢?俗话说没吃过猪蹄也见过猪跑啊,追女孩子的套路虽然许多人在用,可是层出不穷的追女孩套路,你真的都了解吗?我们都知道女孩子喜欢男孩子是 ...
怎样追求心仪的女孩子
只有很少的人才天生就很会谈恋爱,懂得在什么时候该做什么,什么情况下怎么反应女孩子会喜欢,而大部分人都需要通过后天的学习,才会逐渐获得谈恋爱的能力和技巧. 现在,让我们来看看该如何开始追求一个刚认识的女 ...
html5妇女节游戏,html5开发三八女王节表白神器
效果图如下所示: 开发三八女王节表白神器运用到的知识点:css33D场景.3D变换.爱心制作技巧.3D立方体制作技巧.自定义动画,原生js DOM节点操作.循环等. :point_down:html代 ...

[HTML]立方体动态照片墙，给女孩子表白拿去用吧

[HTML]立方体动态照片墙，给女孩子表白拿去用吧相关推荐

最新文章

热门文章