1.准备工作

写之前先吆喝一嗓子：需要撩妹子的，表白女朋友或者老婆的，走过路过不要错过呀

IDE使用Vscode工具

2.开始学习

2.1.建立目录结构

新建一个文件夹mygirl，在mygirl文件夹中分别新建3个文件夹：css，images，video以及一个index.html文件

如下图所示：

2.2.编写css样式

在css文件夹中新建program.css样式文件，内容如下：

* {margin: 0px;padding: 0px;
}html {overflow: hidden;height: 100%;background: linear-gradient(rgb(0, 238, 255) 0%, #000 100%);
}.title {color: rgb(255, 0, 200);text-align: center;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;font-size: 40px;
}.cube {position: relative;margin: 0px auto;margin-top: 9%;margin-left: 42%;width: 300px;height: 300px;transform: rotateX(-30deg) rotateY(-80deg);transform-style: preserve-3d;animation: rotate 15s infinite;
}.cube .outer-cube,
.cube .inner-cube {transform-style: preserve-3d;
}/* 旋转立方体 */
@keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}
}/* 外层立方体样式 */
.outer-cube .outer-top,
.outer-cube .outer-bottom,
.outer-cube .outer-right,
.outer-cube .outer-left,
.outer-cube .outer-front,
.outer-cube .outer-back {position: absolute;top: 0;left: 0;width: 200px;height: 200px;border: 1px solid #fff;opacity: 0.3;transition: all .9s;
}.outer-cube img {width: 200px;height: 200px;
}.outer-top {transform: rotateX(90deg) translateZ(100px);
}.outer-bottom {transform: rotateX(-90deg) translateZ(100px);
}.outer-front {transform: rotateY(0deg) translateZ(100px);
}.outer-back {transform: translateZ(-100px) rotateY(180deg);
}.outer-left {transform: rotateY(90deg) translateZ(100px);
}.outer-right {transform: rotateY(-90deg) translateZ(100px);
}/* 嵌套的内层立方体样式 */
.inner-cube>div {position: absolute;top: 35px;left: 35px;width: 130px;height: 130px;
}.inner-cube img {width: 130px;height: 130px;
}.inner-top {transform: rotateX(90deg) translateZ(65px);
}.inner-bottom {transform: rotateX(-90deg) translateZ(65px);
}.inner-front {transform: rotateY(0deg) translateZ(65px);
}.inner-back {transform: translateZ(-65px) rotateY(180deg);
}.inner-left {transform: rotateY(90deg) translateZ(65px);
}.inner-right {transform: rotateY(-90deg) translateZ(65px);
}.cube:hover .outer-top {right: -70px;bottom: -70px;opacity: 0.8;transform: rotateX(90deg) translateZ(200px);
}.cube:hover .outer-bottom {right: -70px;bottom: -70px;opacity: 0.8;transform: rotateX(-90deg) translateZ(200px);
}.cube:hover .outer-front {right: -70px;bottom: -70px;opacity: 0.8;transform: rotateY(0deg) translateZ(200px);
}.cube:hover .outer-back {right: -70px;bottom: -70px;opacity: 0.8;transform: translateZ(-200px) rotateY(180deg);
}.cube:hover .outer-left {right: -70px;bottom: -70px;opacity: 0.8;transform: rotateY(90deg) translateZ(200px);
}.cube:hover .outer-right {right: -70px;bottom: -70px;opacity: 0.8;transform: rotateY(-90deg) translateZ(200px);
}.message .author {position: absolute;right: 50px;bottom: 100px;background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #CC00CC 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #CC00CC 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);font-size: 35px;-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 4s linear infinite;
}@keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}
}.message .tip {position: absolute;right: 0px;bottom: 20px;color: red;font-size: 18px;
}

2.3.放置图片和音乐

在images中放置需要显示的6张图片，编号分别是1~6.jpg

在video中放置下载好的mp3格式的音乐，例如《童话》

2.4.编写index.html展示页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/program.css">
</head>
<body>
<div class="title">旋转3D立体八音盒
</div>
<div class="cube"><!-- 外层立方体 --><div class="outer-cube"><div class="outer-top"><img src="data:images/1.jpg"/></div><div class="outer-bottom"><img src="data:images/2.jpg"/></div><div class="outer-front"><img src="data:images/3.jpg"/></div><div class="outer-back"><img src="data:images/4.jpg"/></div><div class="outer-left"><img src="data:images/5.jpg"/></div><div class="outer-right"><img src="data:images/6.jpg"/></div></div><!-- 内层立方体 --><div class="inner-cube"><div class="inner-top"><img src="data:images/6.jpg"/></div><div class="inner-bottom"><img src="data:images/5.jpg"/></div><div class="inner-front"><img src="data:images/4.jpg"/></div><div class="inner-back"><img src="data:images/3.jpg"/></div><div class="inner-left"><img src="data:images/2.jpg"/></div><div class="inner-right"><img src="data:images/1.jpg"/></div></div>
</div>
<div><div class="message"><div class="author">XXX制作</div><div class="tip"><audio controls="controls" autoplay="autoplay"><source src="./video/tonghua.mp3" type="audio/mpeg"/>Your browser does not support the audio element.</audio></div></div>
</div>
</body>
</html>

3.使用教程

用浏览器（不要用IE浏览器）打开mygirl文件夹下的index.html
记得带上耳机，点击右下角的音乐开关
温馨提示：鼠标移入移出立方体，将会显示效果！

4.效果展示

看完不点赞的，都是属于白嫖强烈鄙视白嫖党，欢迎大家留言。

撩小姐姐的小程序(二)----旋转3D八音盒相关推荐

帮粉丝脱单！1月份最佳人气小姐姐和小哥哥推荐
距离情人节还有13天,想要脱单的抓紧啊! 优质青年脱单前线目前汇聚25万程序员群体,旨在解决广大优质青年的单身问题,帮助你尽快脱单!目前我们正在联络其他行业的优质青年. 如果身边有单身的小伙伴或者想 ...
为网站添加在线随机小姐姐视频小功能
偶然发现一个为网站添加在线随机小姐姐美女短视频功能,觉得挺新鲜的现在分享出来.现发布是可以正常使用的,视频是来自其他外部网站,失效后自行网上寻找其他随机视频接口,把代码中的替换即可.大致效果如下: 使 ...
撩小姐姐的小程序(一)----python GUI编程Tkinter
目录 1.准备工作 2.开始学习 2.1 构建窗体 2.2 在窗体中增加组件元素和布局 2.3 针对按钮增加触发事件函数 3.编译打包成exe可执行文件 3.1 需要先安装pyinstaller 3. ...
撩小姐姐的小程序(三)----动态画出爱心和文字
目录 1.准备工作 2.开始学习 2.1.建立目录结构 2.2.编写css样式 2.3.准备js文件 2.3.1.functions.js 2.3.2.garden.js 2.3.3.jquery.j ...
听说一个漂亮的小姐姐图片是程序员无法抗拒的
是这样子的么,评论里见吧
抖音整人/撩小姐姐代码（vbs脚本）
如果你是小白的话也不用急,我们一步一步来. 1.在桌面上右键单击选择新建文本 2.把代码复制粘贴 3.保存 4.选中文本,右键单击选择重命名 eg: 新建文本文件.txt ----->啦啦啦.v ...
2020ChinaJoy全是小姐姐，程序员小伙当场流鼻血
看到这篇水文的时候你应该知道了,你们的敖丙这周末又偷懒没写技术文和拍视频,偷偷跑去上海浪了两天,不过技术文我工作日还是得熬夜搞一篇出来,女读者的面试视频剪辑进度10%了,这周应该可以结束. 再说你们以 ...
学Python真的可以无所欲为，连对门小姐姐的家wifi密码都可以破解
明人不说暗话,我看上我家对面的那个小姐姐很久了,就是不知道怎么去搭讪,有一天链接wifi的时候,突然想着,小姐姐,小姐姐,我给你变个魔术,你信不信我知道你家的wifi密码,如果我猜对了,你就给我你的微 ...
用 Python 分析 CSDN 小姐姐一年都做了啥
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! [CSDN 编者按]今天是 2017 年最后一天,在此向所有程序员朋友们道一声「新年快乐」, ...

撩小姐姐的小程序(二)----旋转3D八音盒