web实训，实现3d盒子翻转和音乐播放器

最新推荐文章于 2021-10-12 17:01:32 发布

陌丶尘

最新推荐文章于 2021-10-12 17:01:32 发布

阅读量382

点赞数

分类专栏： web实训过程

本文链接：https://blog.csdn.net/weixin_43824233/article/details/106793120

版权

web实训过程专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先先放上效果图（就一个截图，没办法诠释盒子的翻转）：
在这里插入图片描述
接下来是结构，img放你喜欢的歌星的图片，music放mp3文件：

3d.html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#box{
				margin: auto auto;
				width: 300px;
				height: 300px;
				background: green;
				position: fixed;/* 固定定位 */
				top: 0;left: 0;right: 0;bottom: 0;
				/* 3d转换 */
				transform-style: preserve-3d;
				transform: rotateX(20deg) rotateY(20deg);
				/* 调用c3动画属性 */
				animation: suibian 10s linear infinite 2s;/* 第三个元素不写就是逐张,第四个默认一次,第五个延迟执行 */
			}
			#box>img{
				position: absolute;/* 绝对定位根据有定位属性的父元素进行定位，若父元素没有定位属性则根据body进行定位，层级发生改变，原有位置不保留  */
				width: 100%;height: 100%;/* 100%也是继承,父亲有多少就继承多少 */
				background: black;
			}
			/* 子节点查找 伪类选择器*/
			#box img:nth-child(1){/* 前 */
				transform: translateZ(150px);/* 向Z轴平移2分之一 */
			}
			#box img:nth-child(2){/* 后 */
				transform: rotateX(-180deg) translateZ(150px);
			}
			#box img:nth-child(3){/* 左侧 */
				transform: rotateY(-90deg) translateZ(150px);
			}
			#box img:nth-child(4){/* 右侧 */
				transform: rotateY(90deg) translateZ(150px);
			}
			#box img:nth-child(5){/* 上 */
				transform: rotateX(-90deg) translateZ(150px);
			}
			#box img:nth-child(6){/* 下侧 */
				transform: rotateX(90deg) translateZ(150px);
			}
			/* 定义c3动画 */
			@keyframes suibian{
				from{}
				to{transform: rotateX(380deg) rotateY(740deg);}
			}
		</style>
	</head>
	<body>
		<marquee><!-- 让里面的文本自动滚屏 -->
			<h1 id="mn">点击图片播放音乐</h1>
			
		</marquee>
		<div id="box">
			<!-- img[src="img/$.png"]*6 -->
			<img name="music/1.mp3" src="img/1.png" alt="">
			<img name="music/2.mp3" src="img/2.png" alt="">
			<img name="music/3.mp3" src="img/3.png" alt="">
			<img name="music/4.mp3" src="img/4.png" alt="">
			<img name="music/5.mp3" src="img/5.png" alt="">
			<img name="music/6.mp3" src="img/6.png" alt="">
		</div>
		<!-- // audio音频 -->
		<audio id="music" autoplay="autoplay" src=""></audio><!-- autoplay自动播放 -->
	</body>
	<script type="text/javascript">
		var img = document.getElementById('box').children;
		var music = document.getElementById('music');
			var mn = document.getElementById('mn');
			for(let i=0;i<img.length;i++)
		{
			img[i].onclick = function(){
				music.src = this.name;
				mn.innerText = this.name.substring(this.name.indexOf("/")+1);
			}
		}
		
	</script>
</html>

陌丶尘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web实训，实现3d盒子翻转和音乐播放器

首先先放上效果图（就一个截图，没办法诠释盒子的翻转）：接下来是结构，img放你喜欢的歌星的图片，music放mp3文件：3d.html代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} #box{
复制链接

扫一扫