猎人一直打猎发现太累了,他选择了布陷阱…,只要陷阱布置得多收益还是不错的,守株待兔也是一种策略。
南宁创业公司,专业小程序开发:www.zkelm.com
今天得教程就是把昨天的立体方块弄成一个骰子。在上面加入一些点 结合上次的教程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D立方块的制作</title>
<style>
body{background: #000;}
.box{
position: absolute;
width:85px;
height: 85px;
margin:50px;
transform-style:preserve-3d;
transform:rotateX(20deg) rotateY(50deg);
}
.box > div{
position: absolute;
left:0;top:0;
width:100%;height:100%;
border:5px solid #cdcdcd;
border-radius: 8px;
}
.up{
background-color: #ddd;
transform:translatey(-42.5px) rotatex(90deg);
display: flex;
justify-content: center;
align-items: center;
}
.down{
background-color: #ddd;
transform:translatey(42.5px) rotatex(90deg);
display: flex;
justify-content: space-between;
}
.down .items:nth-child(2){
align-self:flex-end;
}
.left{
background-color:#ddd;
transform:translatex(-42.5px) rotatey(90deg);
display: flex;
justify-content: space-between;
}
.left .items:nth-child(2){
align-self:center;
}
.left .items:nth-child(3){
align-self:flex-end;
}
.right{
background-color:#ddd;
transform:translatex(42.5px) rotatey(90deg);
display: flex;
flex-direction:column;
justify-content: space-between;
}
.column{
display: flex;
justify-content: space-between;
}
.back{
background-color:#ddd;
transform:translatez(-42.5px) ;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.forward{
background-color:#ddd;
transform:translatez(42.5px) ;
display: flex;
flex-direction:column;
justify-content: space-between;
}
.forward .column:nth-child(2){
justify-content: center;
}
.items{
margin:3px;
width:20px;
height: 20px;
background: #000;
border-radius:50%;
}
@keyframes myfirst{
0%{left:0px;top:0px;transform:rotatex(0deg) rotatey(0deg)}
100%{left:400px;top:100px;transform:rotatex(360deg) rotatey(100deg)}
}
.myclass{
animation: myfirst 5s;
}
</style>
</head>
<body>
<div id="mbox" class="box" onclick="myfun()">
<div class="up"><div class="items"></div></div>
<div class="down">
<div class="items"></div>
<div class="items"></div>
</div>
<div class="left">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
<div class="right">
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
</div>
<div class="forward">
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
<div class="items"></div>
</div>
</div>
<div class="back">
<div class="column">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
<div class="column">
<div class="items"></div>
<div class="items"></div>
<div class="items"></div>
</div>
</div>
</div>
<script>
function myfun(){
document.querySelector(".box").classList.add('myclass');
setTimeout(function(){
document.querySelector(".box").classList.remove('myclass');
},5000)
}
</script>
</body>
</html>
效果图如下:
这里用到两个知识新点:javascript操作Dom的, 这个我接下来就是要学习的一个方向, 学习原生的JS对Dom的操作,
document.querySelector("div")
比如这句话 他的意思就是选择 第一个div
document.querySelectorAll("div")
这个是意思是选择所有的div元素 ! 返回的是一个数组
<script>
document.querySelector("div").className="box"
document.querySelertor("div").style="background:#666";
</script>
**此两句代码的区别在于:className=“myclass” 此句代码会执行 在html 里面替换掉class得值
比如原句
<div class="box"></div>
执行之后就会变成
<div class="myclass"></div>
而Style 则会覆盖Style的值,例如
<div id="myid" style="color:#f55">我的字体是红色
<script>
document.getElementById("myid").style="background:#666";
</script>
</div>
执行的结果是:
style的值直接被覆盖了, 没有了前面的 color:#f55
南宁小程序定制:www.zkelm.com