这是一个手写的小 效果
先写一个立方体之后我们在每个面用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>
7832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
