html音乐自动播放+旋转特效

这里注意文件放置的位置，提前把需要的文件放到img的文件夹里

css文件

.cube{width: 500px;height: 500px;margin: 0 auto ;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 10s 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: 400px;height: 400px;opacity: 0.7;transition: all .4s;
}
/*定义所有图片样式*/
.pic{width: 300px;height: 300px;
}
.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);
}
/*定义小正方体样式*/
.cube span{display: bloack;width: 200px;height: 200px;position: absolute;top: 100px;left: 100px;
}
.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);
}

html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>新婚快乐</title><embed src="./暖暖-梁静茹.mp3"  autoplay="autoplay"preload="auto" preload="auto" hidden="true" autostart="true" loop="true"><link rel="stylesheet" href="../css/index.css"></head><body background="../img/p11.jpg" style=" background-repeat:no-repeat ;background-size:100% 100%;
background-attachment: fixed;margin-left: 10px;" ><!-- <div class="wrap"id="Layer1" style="position:absolute; width:100%; height:100%; background-color: snow; z-index:-1"><!--    /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="../img/p1.jpg"  class="pic"/></div><!--后面图片 --><div class="out_back"><img src="../img/p2.jpg"  class="pic"/></div><!--左图片 --><div class="out_left"><img src="../img/p3.jpg"  class="pic"/></div><div class="out_right"><img src="../img/p4.jpg"  class="pic"/></div><div class="out_top"><img src="../img/p5.jpg"  class="pic"/></div><div class="out_bottom"><img src="../img/p6.jpg"  class="pic"/></div><!--小正方体 --> <span class="in_front"><img src="../img/p7.jpg" class="in_pic" /></span><span class="in_back"><img src="../img/p8.jpg" class="in_pic" /></span><span class="in_left"><img src="../img/p9.jpg" class="in_pic" /></span><span class="in_right"><img src="../img/p10.jpg" class="in_pic" /></span><span class="in_top"><img src="../img/p11.jpg" class="in_pic" /></span><span class="in_bottom"><img src="../img/p12.jpg" class="in_pic" /></span></div></div><div class="lyrics"><ul class="lyricsList"></ul></div></div>
</body></html>

有问题欢迎留言，谢谢大家

html音乐自动播放+旋转特效相关推荐

iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放document.addEventListener("WeixinJSBridgeReady", function ...
audio标签有的浏览器不支持音乐自动播放
audio标签有的浏览器不支持音乐自动播放 H5中的audio标签有的IOS设备和安卓设备不支持自动播放,也就是不支持autoplay属性,并且,这些浏览器只支持用户click点击事件触发audio. ...
微信浏览器中实现音乐自动播放
近日微信浏览器中h5页面实现音乐自动播放,试了好多方法,最后还是下面方法比较好用引入微信sdk <script src="http: //res.wx.qq.com/open/js/ ...
h5 ＜audio＞音乐自动播放，谷歌禁止音乐自动播放处理方法
html代码 <a href="javascript:;" class="musicBtn functionBtn2 on" id="mc_pl ...
html ios音乐自动播放muted,video下autoplay属性无效的解决方法(添加muted属性)
背景:video下载入ogg格式视频,并设置自动播放属性autoplay,但是使用Chrome预览时,视屏画面已加载出来,但是无法自动播放,F5刷新后可以自动播放.使用火狐浏览器可以自动播放.最初代码 ...
html音乐自动播放暂停js,JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现. 首先在网页中嵌入背景音乐,html5代码为: 通过audio的id即可控制音乐的播放(play())和暂停(pa ...
android+多米音乐+自动播放,android 高仿多米音乐播放器
半年前写了个音乐播放器,仿的是多米的UI界面之前发表在eoe社区,今天也发到csdn上来不罗嗦,先上效果图: 下面简单介绍下代码: MusicPlayer 播放音乐的核心类,该类有以下成员变量 p ...
android+多米音乐+自动播放,android 高仿多米音乐播放器（有图有码有真相）
半年前写了个音乐播放器,仿的是多米的UI界面之前发表在eoe社区,今天也发到csdn上来不罗嗦,先上效果图: 下面简单介绍下代码: MusicPlayer 播放音乐的核心类,该类有以下成员变量 p ...
html音乐自动播放暂停js,JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放...
我们做项目的时候可能会用到需要在整个网站中添加背景音乐. 但如果仅在页面中添加BGSOUND标签来播放音乐的话,当页面切换时,背景音乐就会重新加载,而达不到连贯播放的效果. 为了解决这个问题,我们最常 ...

html音乐自动播放+旋转特效

html音乐自动播放+旋转特效相关推荐

最新文章

热门文章