HTML5情人节礼物2（女友3D相册）

前言

简简单单最表心意，一个翻转的3D方块相册，有外6张照片，内6张照片。

HTML代码+CSS代码

首先是HTML

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>3D相册</title><base target="_blank" /><link rel="stylesheet" href="./sourses/3D相册.css" />
</head>
<body><div class="hovertreeinfo"><HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3></HR><p>因为有你，世界变得美丽；<br>因为有你，生活有了意义；<br>因为有你，一切都是甜蜜。<br>女某某，情人节快乐！</p><HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3></HR><h2 style="color: red">Tips:鼠标触碰下方方块有惊喜！</h2><br><br></div><div><h1 class="text">情人节快乐</h1></div><div class="wrap"><div class="cube"><div class="out_front"><img src="./sourses/pictures/女1.jpg" class="pic" />  <!-- 外前 --></div><div class="out_back"><img src="./sourses/pictures/女2.jpg" class="pic" />  <!-- //外后 --></div><div class="out_left"><img src="./sourses/pictures/女3.jpg" class="pic" />  <!-- //外左 --></div><div class="out_right"><img src="./sourses/pictures/女4.jpg" class="pic" />  <!-- //外右 --></div><div class="out_top"><img src="./sourses/pictures/女5.jpg" class="pic" />  <!-- 外上 --></div><div class="out_bottom"><img src="./sourses/pictures/女6.jpg" class="pic" />  <!-- 外下 --></div><!--小正方体 --><span class="in_front"><img src="./sourses/pictures/男1.jpg" class="in_pic" /> <!-- //内前 --></span><span class="in_back"><img src="./sourses/pictures/男2.jpg" class="in_pic" /> <!-- //内后 --></span><span class="in_left"><img src="./sourses/pictures/男3.jpg" class="in_pic" /> <!-- 内左 --></span><span class="in_right"><img src="./sourses/pictures/男4.jpg" class="in_pic" /> <!-- 内右 --></span><span class="in_top"><img src="./sourses/pictures/男5.jpg" class="in_pic" /> <!-- 内上 --></span><span class="in_bottom"><img src="./sourses/pictures/男6.jpg" class="in_pic" /> <!-- 内下 --></span></div></div><iframe src = "./sourses/Nigel Silin - Sakura Tears.mp3" allow = "autoplay" hidden /> <!-- 音乐文件的路径 -->
</body>
</html>

然后是CSS

html{background-image: linear-gradient(#8b9da9, #fff6e4);box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);height: 100%;color:red;font-family: arial,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
}
h2{position: fixed;width: 100%;transform:translateY(-50%);font-family: 'Love Ya Like A Sister', cursive;font-size: 30px;color: #c70012;padding: 0 20px;
}
.sy {background:#2f373a;font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:1em;color:#4e4e4e;min-width:920px;border-top:10px solid #0c0e0e}/*最外层容器样式*/
.wrap{width: 200px;height: 200px;/*改变左右上下,图片方块移动*/margin: 150px auto;position: relative;}
/*包裹所有容器样式*/
.cube{width: 200px;height: 200px;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: 200px;height: 200px;opacity: 0.8;transition: all .4s;
}
/*定义所有图片样式*/
.pic{width: 200px;height: 200px;
}
.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式by 何问起
*/
.cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;
}
.cube .in_pic{width: 100px;height: 100px;
}
.cube .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);
}
.hovertreeinfo{text-align:center;color: transparent;-webkit-text-stroke: 1px #FF1CAE;letter-spacing: 0.04em;
}.text{width: 300px;height: 200px;position: absolute;left: 50%;margin-left: -150px;text-align:center;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%);-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */-webkit-background-clip: text;/* 裁剪背景图，使文字作为裁剪区域向外裁剪 */-webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s linear infinite;font-size: 40px;
}@keyframes masked-animation {0% {background-position: 0  0;}100% {background-position: -100%  0;}
}

画面演示

进入页面会播放音乐

然后鼠标触碰正方体会弹出外面的照片，然后可以看到里面的照片

最后

自己会修改的就自己修改照片路径和音乐路径，不会的就下载完整包吧
完整包就到source目录里面修改pictures的照片，记住若是更改名字，在HTML文件里面的照片地址也要对应修改，懒得改的就把男6张和女6张的照片按原本的名字就行。修改音乐同个道理
可以到CSDN下载 1积分就行
完整RAR包下载

免费云盘连接

链接：https://pan.baidu.com/s/1STP1PEbPGhvrg9v38Dyu5A
提取码：d3vi

HTML5情人节礼物2（女友3D相册）相关推荐

520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
HTML5七夕情人节表白网页(幻化3D相册) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤幻化3D相册❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列 ...
HTML5七夕情人节表白代码 (动态3D相册)HTML+CSS+JS
❉ 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给 ...
HTML5七夕情人节表白代码 (动态3D相册) HTML+CSS+JS
❤ 精彩专栏推荐
我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的 ...
我是如何用一行代码表白学妹~❤520情人节送女朋友的3D樱花雨相册礼物❤~(程序员表白专属)...
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的 ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐)_HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(不含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css ...
HTML5七夕情人节表白网页_圣诞节3d相册(含音乐开关)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤圣诞节3d相册(含音乐开关)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱 ...
❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)
❉ 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹 ...

HTML5情人节礼物2（女友3D相册）

前言

HTML代码+CSS代码

画面演示

最后

免费云盘连接

HTML5情人节礼物2（女友3D相册）相关推荐

最新文章

热门文章