3D相册加背景图和背景音乐

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D相册</title>
<link rel="stylesheet" type="text/css" href="3d相册.css">
</head>
<div class="box">
<embed src="音乐地址" hidden="true" autostart="true" loop="true" hidden="true ">
<ul class="minbox">
<li><img src="图片地址01.jpg" width="100" height="100"></li>
<li><img src="图片地址02.jpg" width="100" height="100"></li>
<li><img src="图片/03.jpg" width="100" height="100"></li>
<li><img src="图片地址04.jpg" width="100" height="100"></li>
<li><img src="图片地址05.jpg" width="100" height="100"></li>
<li><img src="图片地址06.jpg" width="100" height="100"></li>
</ul>
<ol class="maxbox">
<li><img src="图片地址/1.jpg" width="400" height="400"></li>
<li><img src="图片地址/2.jpg" width="400" height="400"></li>
<li><img src="图片地址3.jpg" width="400" height="400"></li>
<li><img src="图片地址.jpg" width="400" height="400"></li>
<li><img src="图片地址/5.jpg" width="400" height="400"></li>
<li><img src="图片地址/6.jpg" width="400" height="400"></li>
</ol>
</div>
</body>
</html>

备注：，

1，01为两张相同图片，但为不同格式，1为400px乘400px，01为100px乘100px。

以此类推，
hidden="ture"为自动播放，属性值可改为fale，取消自动播放，loop=“正整数”设置播放次数

css代码：

*{
   margin:0;
   padding:0;
}
body{

background-image: url(图片地址);
               background-size: cover;
   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);
   }
}

3D相册加背景图和背景音乐相关推荐

eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决
eacharts-gl下载时版本一定要和eacharts版本对应.否则不出效果!!目前已知可以生效有: 第一种1: npm install echarts@5.1.2 --save npm insta ...
php背景图添加字,怎样给视频后面加背景图视频加背景图片并添加一行广告文字...
有不少广告小视频中,视频画面是一张海报背景图片,图片上显示一个小视频播放,并且在画面上还有显示一行广告字幕.这样的宣传视频制作其实蛮简单的,怎样给视频后面加背景图片的方法倒是挺多,要给视频加背景图片的 ...
VScode加背景图（工作区及全局）
VScode 加背景图 1.下插件background(图像是动漫小女孩)(ctrl+ shift + x可快捷打开插件商店,以下出现的快捷方式皆会帮助我们快速找到位置) 2. ( ctrl+, ) ...
swif开发iOS中如果要对某块内容加背景图并自适应填充图像
swif开发iOS中如果要对某块内容加背景图并自适应填充图像 private func setupInfiniteScrollingView() { self.loadMoreView = UIVie ...
windowbuilder怎么加背景图_小红书引流：爆款笔记封面图怎么做？（内附教程）...
大家好,我是小柯老师. 今天,我想给大家带来分享的主题是<小红书引流:爆款笔记封面图怎么做?> 很多宝宝在接触小红书博主这个行业之前,在听到一个有一定粉丝基础的博主仅仅通过写一篇笔记就可以 ...
windowbuilder怎么加背景图_抖音吸粉新套路，主页背景图太太太太有心机了
抖音在今年1月初,宣布完成了日活破 2.5 亿,月活破 5 亿的小目标. 现在双微一抖早就成为新媒体运营的标配了,可以说抖音的发展是大势所趋,那么要怎么低成本且快速地在抖音获取用户呢? 在这里,分享一 ...
JAVA实现二维码生成加背景图
应用场景:比如制作海报.宣传图时需要添加扫码关注的二维码先上效果图 ( ≧▽≦ ) POM.XML <!-- https://mvnrepository ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
给html网页加背景图
在css文档里直接改动body. body{ background-image: url(../images/bg.jpg); /*背景图片路径设置*/ background-repeat ...

3D相册加背景图和背景音乐

3D相册加背景图和背景音乐相关推荐

最新文章

热门文章