1. 技术文章
  2. web前端--音乐魔方旋转相册笔记（1）

web前端--音乐魔方旋转相册笔记（1）

由 懵懂的女人 提交于 2020-11-15 04:47:39

前段时间，520的时候就用自己学习到的一点HTML,CSS,Javascript等，给女朋友做了一个简单的网页，这里记录一下其中的一小部分---音乐魔方旋转相册。

- 这里魔方相册的例子思路来自学习的一门课程

  • 下面正式开始：

  • 音乐魔方相册： 需要用div来作出一个魔方来展示照片,首先做一个六面的魔方。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>送给你的相册</title>
	</head>
<body>
<div class="">
<div class="container"><!--最外层，将做好的魔方放在盒子里，后期定位-->
	<div class="box"><!--整个魔方-->
	<!--作出魔方的6个面，并赋予class名-->
		<div class="box-page top"></div>
		<div class="box-page bottom"></div>
		<div class="box-page left"></div>
		<div class="box-page right"></div>
		<div class="box-page front"></div>
		<div class="box-page back"></div>
	</div>
</div>
</body>

给魔方六个面分别给一种颜色看看，魔方效果。这部分需要css来实现。

*{/*清除页面的参数*/
	margin: 0;
    padding: 0;
}
.container{/*魔方的大小，可根据效果调整*/
    width: 300px;
	height: 300px;
    border: 1px solid #000;/*对面做一个边框*/
	margin: 150px auto;
	   }
.box{
		width: 300px;/*面的大小自己可以根据魔方大小调整*/
		height: 300px;
		box-sizing: border-box;
		background-color: red;
		}

此时运行发现页面中只有一个红色的正方形， 在这里插入图片描述 其实我们可以将做好的魔方每个面着色并将魔方整体旋转一下，将便于观察。 上面添加：

       /*控制子元素3D转换*/
          transform-style:preserve-3d;            
       /*将盒子旋转，测试代码*/
          transform:rotateX(45deg) rotateY(45deg);

可以看到的效果如下： 上图是魔方转换到某时刻时的截图，可以看出，我们前面创建的魔方六个面全部在魔方的中间，因此要实现魔方六个面分别在魔方的上下左右前后，需要将六个面进行旋转。 （其实六个面是重叠在一起，在魔方底面，这里截图是为了后面建立坐标轴便于理解。）

  • 我们可以自己对魔方建立X,Y,Z坐标轴。可以自己画一下，便于我们写面的旋转。 （下面我简单的画了一下，哈哈哈） 图3
  • 箭头方向均为正方向，反方向，数值为负。
这里需要用属性 transform，
（1）用到的旋转方法为，rotateX(),rotateY(),rotateZ(),按照x方向旋转则为rotateX(),y方向为rotateY()..，括号里为旋转角度；
（2）还要用到.translate() 方法，使元素从其当前位置移动，括号里写移动的距离 ，这里为坐标。
  • 下面为六个面的旋转，移动，代码：
.box-page{
	width: 300px;
	height: 300px;
	position: absolute;/*位置初始化，相对于魔方盒子定位*/
	transform-style:preserve-3d;/*必须有该属性，否则将不会旋转，移动。*/
	}
.top{
	transform:translateZ(150px);/*150px,正值为沿着Z轴向上（正方向）移动150px;负值则为向下（反方向）移动。*/
   }
.bottom{
	transform:translateZ(-150px) rotateX(180deg);/*正值为沿着Z轴向上
	（正方向）移动150px;负值则为向下（反方向）移动。rotateX()方法则为沿着X轴旋转，180deg为旋转角度*/
	}
.left{
	transform: translateX(-150px) rotateY(-90deg);
	}
.right{
	transform:translateX(150px) rotateY(90deg);
	}
.front{
	transform:translateY(150px) rotateX(-90deg);
	}
.back{
	transform: translateY(-150px) rotateX(90deg);
	}
  • 此时整个魔方相册只是有了六个面，还需要让它动起来，那么需要运用到元素动画的芝士，animation：属性的参数，自己可以查查。
/*创建动画*/
.box{
       animation:ro 4s linear infinite ;/*属性分别为，动画名，动画时间，速度，持续时间*/
       animation-direction: alternate;
	}
/*需要将动画绑定在选择器上*/
/*分别在0%，34%，66%，100%时刻，旋转整个魔方。*/
@keyframes ro{
		0%{
			transform: rotateX(0deg) rotateY(0deg);
		}
		34%{				
			transform: rotateX(90deg) rotateY(90deg);
		}
		66%{	
			transform: rotateX(180deg) rotateY(180deg);
		}
		100%{				
			transform: rotateX(360deg) rotateY(360deg);
		}
	}
  • 此时魔方的动画效果（这里将每个面填充为颜色，可自己换为照片）如下，下图为转动起来某刻的魔方截图： 在这里插入图片描述
  • 可将每个面的图片分割成九个小块，按照动画向外飞出去，效果图列出来，js实现代码如下：
<script type="text/javascript">
	var arr = document.querySelectorAll(".box>div");
	for (var n= 0;n<arr.length; n++){//遍历每个面
		for(var r=0; r <3; r++){//外层循环每个面的行
			for (var c=0; c<3;c++){//内层循环遍历每个面的列
				// 创建元素
				var divs = document.createElement("div");
                divs.style.cssText ="width:100px;height:100px;border:1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(images/a"+n+".jpg); background-size:300px 300px;";
                arr[n].appendChild(divs);
                //改变每一个div的位置；
                divs.style.left = 100*r+"px";
                divs.style.top = 100*c +"px";
                // 改变背景图相应的位置
				divs.style.backgroundPositionX = -r*100+"px";
				divs.style.backgroundPositionY = -c*100+"px";	
			}
		}
	}
</script>
  • css部分的样式代码，
代码如下：
/*每一个小方格的样式：*/
.box-page div:nth-child(1){
		animation: al 4s linear ;
		}
.box-page div:nth-child(2){
		animation: al 4s linear 0.5s;
		}
.box-page div:nth-child(3){			
		animation: al 4s linear 1s;
		}
.box-page div:nth-child(4){
		animation: al 4s linear 1.5s;
		}
.box-page div:nth-child(5){
		animation: al 4s linear 2s;
		}
.box-page div:nth-child(6){
		animation: al 4s linear 2.5s;
		}
.box-page div:nth-child(7){
		animation: al 4s linear 3s;
		}
.box-page div:nth-child(8){
		animation: al 4s linear 3.5s;
		}
.box-page div:nth-child(9){
		animation: al 4s linear 4s;
		}
	/*每一个魔方面的小方格动画。*/
@keyframes al{
	0%{				
		transform: translateZ(0px) scale(1) rotateZ(0deg);
	}
	30%{			
		transform: translateZ(300px) scale(0) rotateZ(360deg);
		}
	90%{	
		transform: translateZ(300px) scale(0) rotateZ(360deg);
		}
	100%{		
		transform: translateZ(0px) scale(1) rotateZ(0deg);
		}
	}
  • 动画都实现了，魔方可以整体动，魔方六个面每个面还可以分割成九个小块，实现动态效果，那还缺点音乐：
添加下列代码可实现：
<audio src="music1.mp3" autoplay="autoplay" loop="loop"></audio>
  • 有其他想法还可以加点，比如可以加个视频，画布，这部分为html5的东西，后期有想法再完善吧.

整个魔方相册的实现完整代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>相册</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 300px;
			height: 300px;
			/*border: 1px solid #000;*/
			margin: 150px auto;
			perspective: 200000px;/*调整视距，不然魔方看着是扁的*/
		}
		body{
			 width: 100%;
		     height: 100%;
		    /* background:#FDF5E6;*/
		     background-size: screen;
		}
		.box{
			width: 300px;
			height: 300px;
			box-sizing: border-box;
			/*控制子元素3D转换*/
            transform-style:preserve-3d;            
            /*将盒子旋转，测试看看*/
            /*transform:rotateX(45deg) rotateY(45deg);*/
            animation:ro 4s linear infinite ;
            animation-direction: alternate;
		}
		@keyframes ro{
			0%{	
				transform: rotateX(0deg) rotateY(0deg);
			}
			34%{			
				transform: rotateX(90deg) rotateY(90deg);
			}
			66%{			
				transform: rotateX(180deg) rotateY(180deg);
			}
			100%{				
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
		.box-page{
			width: 300px;
			height: 300px;
			position: absolute;/*位置初始化*/
			transform-style:preserve-3d;
		}
		.top{
			background-color: red;
			transform:translateZ(150px);
		}
		.bottom{
			background-color: green;
			transform:translateZ(-150px) rotateX(180deg);
		}
		.left{
			background-color: pink;
			transform: translateX(-150px) rotateY(-90deg);
		}
		.right{
			background-color:blue;
			transform:translateX(150px) rotateY(90deg);
		}
        .front{
			background-color: yellow;
			transform:translateY(150px) rotateX(-90deg);
		}
		.back{
			background-color: orange;
			transform: translateY(-150px) rotateX(90deg);
		}	
		.box-page div:nth-child(1){
			animation: al 4s linear ;
		}
		.box-page div:nth-child(2){
			animation: al 4s linear 0.5s;
		}
		.box-page div:nth-child(3){
			
			animation: al 4s linear 1s;
		}
		.box-page div:nth-child(4){
			animation: al 4s linear 1.5s;
		}
		.box-page div:nth-child(5){
			animation: al 4s linear 2s;
		}
		.box-page div:nth-child(6){
			animation: al 4s linear 2.5s;
		}
		.box-page div:nth-child(7){
			animation: al 4s linear 3s;
		}
		.box-page div:nth-child(8){
			animation: al 4s linear 3.5s;
		}
		.box-page div:nth-child(9){
			animation: al 4s linear 4s;
		}	
		@keyframes al{
			0%{				
				transform: translateZ(0px) scale(1) rotateZ(0deg);
			}
			30%{				
				transform: translateZ(300px) scale(0) rotateZ(360deg);
			}
			90%{				
				transform: translateZ(300px) scale(0) rotateZ(360deg);
			}
			100%{				
				transform: translateZ(0px) scale(1) rotateZ(0deg);
			}
		}
	</style>
</head>
<body>
	<audio src="music1.mp3" autoplay="autoplay" loop="loop"></audio>
	<!--魔方照片有六个面-->
<div class="container"><!--最外层-->
	<div class="box"><!--6个面的父元素盒子-->
		<div class="box-page top"></div>
		<div class="box-page bottom"></div>
		<div class="box-page left"></div>
		<div class="box-page right"></div>
		<div class="box-page front"></div>
		<div class="box-page back"></div>
	</div>
</div>
<!--
<script type="text/javascript">
	var arr = document.querySelectorAll(".box>div");
	for (var n= 0;n<arr.length; n++){//遍历每个面
		for(var r=0; r <3; r++){//外层循环每个面的行
			for (var c=0; c<3;c++){//内层循环遍历每个面的列
				// 创建元素
				var divs = document.createElement("div");
                divs.style.cssText ="width:100px;height:100px;border:1px solid #fff;position:absolute;box-sizing:border-box;background-image:url(images/a"+n+".jpg); background-size:300px 300px;";
                arr[n].appendChild(divs);
                //改变每一个div的位置；
                divs.style.left = 100*r+"px";
                divs.style.top = 100*c +"px";
                // 改变背景图相应的位置
				divs.style.backgroundPositionX = -r*100+"px";
				divs.style.backgroundPositionY = -c*100+"px";	
			}
		}
	}
</script>
</body>
</html>
  • 就先这些了，520 做的其他东西，改天再更，比如，给她做的属于他的网页，在一起的时间墙，打印字幕，画布等等。

第一次，想着写点东西，好多不规范（哭了），多写几次就好了吧 大家一起加油 奥利给！！！O(∩_∩)O哈哈~

标签
javascript
watermark
Solid
Shadow
RED
c++
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!