随即颜色旋转立方体

这是效果图
这是一个手写的小 效果

先写一个立方体之后我们在每个面用table tr td
标签写出每个面的小圆,之后再js中便利每一个小圆,遍历之后每个面随机选出一些来给他颜色。
注意要清除原先的颜色。

下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				overflow: hidden;
				background: -webkit-radial-gradient(center center, 100% 100%, #003371, black);
				/* display: flex; */
				/* align-items: center; */
			}

			.my-centainer {
				height: 320px;
				width: 320px;
				/* display: flex; */
				/* justify-content: center; */
				margin: 150px auto;
				/*background-color: red;*/
			}

			.my-centainer .photo {
				height: 100%;
				width: 100%;
				/* perspective: 1200px; */
				perspective: 1200px;

				perspective-origin: -5px -300px;
			}

			.my-centainer .photo .centainer {
				height: 320px;
				width: 320px;
				/* transform: rotateX(0deg) rotateY(0deg); */
				transform-style: preserve-3d;
				position: relative;
				animation: xuanzhuan 3s linear infinite;
			}

			@keyframes xuanzhuan {
				from {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}

				to {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}

			.my-centainer .photo .centainer .img {
				height: 320px;
				width: 320px;
				box-sizing: border-box;
				position: absolute;


				background-color: #003371;
				opacity: .9;

			}

			.my-centainer .photo .centainer .img.img1 {
				transform: translateZ(160px);
				/* background-color: blanchedalmond; */

			}

			.my-centainer .photo .centainer .img.img2 {
				transform: translateZ(-160px);
				/* background-color: rosybrown; */
			}

			.my-centainer .photo .centainer .img.img3 {
				transform: rotateY(90deg) translateZ(160px);
				/* background-color: royalblue; */
			}

			.my-centainer .photo .centainer .img.img4 {
				transform: rotateY(90deg) translateZ(-160px);
				/* background-color: darkmagenta; */
			}

			.my-centainer .photo .centainer .img.img5 {
				transform: rotateX(90deg) translateZ(160px);
				/* background-color: red; */
			}

			.my-centainer .photo .centainer .img.img6 {
				transform: rotateX(90deg) translateZ(-160px);
				/* background-color: hotpink; */
			}

			td {
				height: 40px;
				width: 40px;
				border: 1px solid #3eede7;
				box-sizing: border-box;
				border-top: none;
				border-left: none;
				box-shadow: 0px 0px 4px 2px #3eede7;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="my-centainer">
			<div class="photo">
				<div class="centainer">
					<div class="img img1">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img2">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img3">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img4">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img5">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img6">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var move = function() {
					var table = document.getElementsByTagName('table')
					// console.log(table)
					for (var i = 0; i < table.length; i++) {
						var tr = table[i].getElementsByTagName('tr')
						for (var j = 0,index2=0; j <tr.length;) {
							
							if (index2 == 5) {
								break
							}
							j = parseInt(Math.random()*8)
							index2++
							var td = tr[j].getElementsByTagName('td')
							for (var k = 0, index1 = 0; k < td.length;) {
								if (index1 == 5) {
									
									break
								}
								
								td[k].style.backgroundColor = ''
								k = parseInt(Math.random()*8)
								td[k].style.backgroundColor = colors();
								
								index1++
								
							}
						}
					}
				}
				var colors = function() {
					var r = parseInt(Math.floor(Math.random() * 255))
					var g = parseInt(Math.floor(Math.random() * 255))
					var b = parseInt(Math.floor(Math.random() * 255))
					var str = 'rgb' + '(' + r + ',' + g + ',' + b + ')'
					return str
				}
				setInterval(move, 100)
				move()
			}
		</script>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值