【南寧小程序開發：www.zkelm.com】，學了CSS 之後 順便接觸了一些CSS3.0的語法，感覺css3.0更好玩。接下來準備畫費有點時間去把CSS3.0擼一遍，看看到底是啥玩意 。
我設計是這樣子的：1.點擊骰子 自動滾動到另外一邊， 然後隨機出現點數
因爲我用的是純CSS寫的， 所以想了兩天，終於想到了好辦法， 就是先佈局7個點， 然後隨機設置點的背景色=#DDD 這樣子看起來。就是點數變化了， 而且還不影響骰子的排布變現。 hoho 真聰明！
好咧 廢話不多說，直接附上代碼 copy就可以直接運行，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex製作骰子</title>
<style>
body{background: #000;}
.box{
position: relative;
width:90px;
height: 90px;
border: 1ps solid #fff;
background: #bbb;
border-radius:10px;
display: flex;
flex-direction:center;
justify-content: center;
align-items:center;
}
.flexcontainer{
display: flex;
width:80px;
height: 80px;
border:1px solid #ddd;
border-radius: 8px;
background: #ddd;
box-shadow: 2px 2px 3px #888;
flex-direction: column;
flex-wrap:wrap;
justify-content: space-between;
}
.flexitems{
margin:3px;
width:20px;
height: 20px;
background: #000;
border-radius:50%;
}
.column{
display: flex;
justify-content: space-between;
}
.column:nth-child(2) {
justify-content: center;
}
myhide{
background-color: #ddd;
}
myshow{
background-color: #f55;
}
@keyframes myfirst{
0%{left:0px;top:0px;transform:rotate(0deg)}
100%{left:400px;top:100px;transform:rotate(3600deg)}
}
.moveanimate{
animation:myfirst 5s;
}
</style>
</head>
<body><div class="box" onclick="Addstyle()" >
<div class="flexcontainer">
<div class="column">
<div id="1" class="flexitems"></div>
<div id="2" class="flexitems"></div>
<div id="3" class="flexitems"></div>
</div>
<div class="column"><div id="4"class="flexitems"></div></div>
<div class="column">
<div id="5" class="flexitems"></div>
<div id="6" class="flexitems"></div>
<div id="7" class="flexitems"></div>
</div>
</div>
</div><br>
<script type="text/javascript">
function Addstyle(){
setTimeout(function(){
var spot=Math.round(Math.random()*5)
if(spot==0){
document.getElementById("1").style.background="#DDDDDD"
document.getElementById("2").style.background="#DDDDDD"
document.getElementById("3").style.background="#DDDDDD"
document.getElementById("4").style.background="#000"
document.getElementById("5").style.background="#DDDDDD"
document.getElementById("6").style.background="#DDDDDD"
document.getElementById("7").style.background="#DDDDDD"
}else if(spot==1){
document.getElementById("1").style.background="#000"
document.getElementById("2").style.background="#DDDDDD"
document.getElementById("3").style.background="#DDDDDD"
document.getElementById("4").style.background="#DDDDDD"
document.getElementById("5").style.background="#DDDDDD"
document.getElementById("6").style.background="#DDDDDD"
document.getElementById("7").style.background="#000"
}else if(spot==2){
document.getElementById("1").style.background="#000"
document.getElementById("2").style.background="#DDDDDD"
document.getElementById("3").style.background="#DDDDDD"
document.getElementById("4").style.background="#000"
document.getElementById("5").style.background="#DDDDDD"
document.getElementById("6").style.background="#DDDDDD"
document.getElementById("7").style.background="#000"
}else if(spot==3){
document.getElementById("1").style.background="#000"
document.getElementById("2").style.background="#DDDDDD"
document.getElementById("3").style.background="#000"
document.getElementById("4").style.background="#DDDDDD"
document.getElementById("5").style.background="#000"
document.getElementById("6").style.background="#DDDDDD"
document.getElementById("7").style.background="#000"
}else if(spot==4){
document.getElementById("1").style.background="#000"
document.getElementById("2").style.background="#DDDDDD"
document.getElementById("3").style.background="#000"
document.getElementById("4").style.background="#000"
document.getElementById("5").style.background="#000"
document.getElementById("6").style.background="#DDDDDD"
document.getElementById("7").style.background="#000"
}else{
document.getElementById("1").style.background="#000"
document.getElementById("2").style.background="#000"
document.getElementById("3").style.background="#000"
document.getElementById("4").style.background="#DDDDDD"
document.getElementById("5").style.background="#000"
document.getElementById("6").style.background="#000"
document.getElementById("7").style.background="#000"
}
},1500)
document.querySelector(".box").style.animation="myfirst 5s";
setTimeout(function(){
document.querySelector(".box").style.animation="";
},5500)
}
window.onload=function(){
document.getElementById("1").style.background="#DDDDDD"
document.getElementById("2").style.background="#DDDDDD"
document.getElementById("3").style.background="#DDDDDD"
document.getElementById("5").style.background="#DDDDDD"
document.getElementById("6").style.background="#DDDDDD"
document.getElementById("7").style.background="#DDDDDD"
}
</script>
</body>
</html>
南寧小程序開發：zkelm.com
每天進步1% ，貴在堅持 . 我學到什麼新技術我就在這裏更新出來給大家參考，見證我學習的腳步.