摘要:思路骰子有個面,那么創建個為個面,然后用的旋轉屬性旋轉每個面到相應位置,每個面里面的點使用絕對定位確實位置。骰子旋轉寫一個動畫改變值。
思路:骰子有6個面,那么創建6個div為6個面,然后用css3的旋轉屬性旋轉每個面到相應位置,每個面里面的點使用絕對定位確實位置。骰子旋轉寫一個動畫改變rotate值。
效果預覽:https://leeseean.github.io/cs...。
css樣式:
body { background-color: darkkhaki; perspective: 500px; } .diceWrap { position: relative; transform-style: preserve-3d; animation: roll infinite 10s; width: 100px; height: 100px; left: 50%; top: 200px; } .diceWrap>.dice { width: 100px; height: 100px; border-radius: 10px; position: absolute; background-color: black; box-shadow: #D2D2D2 0px 0px 10px 0px inset; } .dice.dice1 { transform: translateZ(50px); } .dice.dice1.inner { transform: translateZ(49px); } .dice.dice2 { transform: rotateX(-180deg) translateZ(50px); } .dice.dice2.inner { transform: rotateX(-180deg) translateZ(49px); } .dice.dice3 { transform: rotateX(90deg) translateZ(50px); } .dice.dice3.inner { transform: rotateX(90deg) translateZ(49px); } .dice.dice4 { transform: rotateX(-90deg) translateZ(50px); } .dice.dice4.inner { transform: rotateX(-90deg) translateZ(49px); } .dice.dice5 { transform: rotateY(90deg) translateZ(50px); } .dice.dice5.inner { transform: rotateY(90deg) translateZ(49px); } .dice.dice6 { transform: rotateY(-90deg) translateZ(50px); } .dice.dice6.inner { transform: rotateY(-90deg) translateZ(49px); } .diceWrap>.dice>.dot { position: absolute; width: 20px; height: 20px; border-radius: 50%; } .diceWrap>.dice1>.dot { left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; background-color: red; } .diceWrap>.dice2>.dot { background-color: orange; } .diceWrap>.dice2>.dot:nth-child(1) { left: 5%; top: 5%; } .diceWrap>.dice2>.dot:nth-child(2) { right: 5%; bottom: 5%; } .diceWrap>.dice3>.dot { background-color: yellow; } .diceWrap>.dice3>.dot:nth-child(1) { left: 5%; top: 5%; } .diceWrap>.dice3>.dot:nth-child(2) { left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; } .diceWrap>.dice3>.dot:nth-child(3) { right: 5%; bottom: 5%; } .diceWrap>.dice4>.dot { background-color: green; } .diceWrap>.dice4>.dot:nth-child(1) { left: 5%; top: 5%; } .diceWrap>.dice4>.dot:nth-child(2) { left: 5%; bottom: 5%; } .diceWrap>.dice4>.dot:nth-child(3) { right: 5%; top: 5%; } .diceWrap>.dice4>.dot:nth-child(4) { right: 5%; bottom: 5%; } .diceWrap>.dice5>.dot { background-color: greenyellow; } .diceWrap>.dice5>.dot:nth-child(1) { left: 5%; top: 5%; } .diceWrap>.dice5>.dot:nth-child(2) { left: 5%; bottom: 5%; } .diceWrap>.dice5>.dot:nth-child(3) { left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; } .diceWrap>.dice5>.dot:nth-child(4) { right: 5%; top: 5%; } .diceWrap>.dice5>.dot:nth-child(5) { right: 5%; bottom: 5%; } .diceWrap>.dice6>.dot { background-color: purple; } .diceWrap>.dice6>.dot:nth-child(1) { left: 5%; top: 5%; } .diceWrap>.dice6>.dot:nth-child(2) { left: 5%; bottom: 5%; } .diceWrap>.dice6>.dot:nth-child(3) { left: 5%; top: 50%; margin-top: -10px; } .diceWrap>.dice6>.dot:nth-child(4) { right: 5%; top: 5%; } .diceWrap>.dice6>.dot:nth-child(5) { right: 5%; top: 50%; margin-top: -10px; } .diceWrap>.dice6>.dot:nth-child(6) { right: 5%; bottom: 5%; } .diceWrap>.cover, .diceWrap>.inner { background: rgb(65,65,65); box-shadow: none; } .diceWrap>.cover { border-radius: 0; transform: translateZ(0px); } .diceWrap>.cover.x { transform: rotateY(90deg); } .diceWrap>.cover.z { transform: rotateX(90deg); } @keyframes roll { 0% { -webkit-transform: rotate3d(1, 1, 1, 0deg) rotateY(0deg) scale3d(0.5, 0.5, 0.5); transform: rotate3d(1, 1, 1, 0deg) rotateY(0deg) scale3d(0.5, 0.5, 0.5); } 50% { -webkit-transform: rotate3d(1, 1, 1, 360deg) rotateY(360deg) scale3d(1, 1, 1); transform: rotate3d(1, 1, 1, 360deg) rotateY(360deg) scale3d(1, 1, 1); } 100% { -webkit-transform: rotate3d(1, 1, 1, 720deg) rotateY(720deg) scale3d(0.5, 0.5, 0.5); transform: rotate3d(1, 1, 1, 720deg) rotateY(720deg) scale3d(0.5, 0.5, 0.5); } }用js控制旋轉結果:
//動畫配置開始 let diceWrap = document.querySelector(".diceWrap"); //不同開獎號碼的配置,不同數字代表不同開獎結果 let keyframes = { "1": [{ transform: "rotate3d(1, 1, 1, 0deg) rotateX(-270deg) scale3d(1, 1, 1)" }, { transform: "rotate3d(1, 1, 1, 360deg) rotateX(90deg) scale3d(1, 1, 1)" }], "2": [{ transform: "rotate3d(1, 1, 1, 0deg) rotateX(-90deg) scale3d(1, 1, 1)" }, { transform: "rotate3d(1, 1, 1, 360deg) rotateX(270deg) scale3d(1, 1, 1)" }], "3": [{ transform: "rotate3d(1, 1, 1, 0deg) rotateY(0deg) scale3d(1, 1, 1)" }, { transform: "rotate3d(1, 1, 1, 360deg) rotateY(360deg) scale3d(1, 1, 1)" }], "4": [{ transform: "rotate3d(1, 1, 1, 0deg) rotateX(-180deg) scale3d(1, 1, 1)" }, { transform: "rotate3d(1, 1, 1, 360deg) rotateX(180deg) scale3d(1, 1, 1)" }], "5": [{ transform: "rotate3d(1, 1, 1, 0deg) rotateZ(-90deg) scale3d(1, 1, 1)" }, { transform: "rotate3d(1, 1, 1, 360deg) rotateZ(270deg) scale3d(1, 1, 1)" }], "6": [{ transform: "rotate3d(1, 1, 1, 0deg) rotateZ(-270deg) scale3d(1, 1, 1)" }, { transform: "rotate3d(1, 1, 1, 360deg) rotateZ(90deg) scale3d(1, 1, 1)" }] } let animationConfig = { duration: 200, iterations: 10, fill: "forwards", //當動畫完成后,保持最后一個屬性值(在最后一個關鍵幀中定義) }; //動畫配置結束 //旋轉函數 function roll(number) { let timeout = null; let diceAnimate = diceWrap.animate( keyframes[number], animationConfig ); let startTime = new Date().getTime(); function playbackRate() { diceAnimate.playbackRate *= 0.93; timeout = setTimeout(playbackRate, 200); if (diceAnimate.playbackRate <= 0.3) { console.log(12222) clearTimeout(timeout); } } playbackRate(); }項目github地址
https://github.com/leeseean/c...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112344.html
摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。 昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得...
摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。 昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得十...
摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。 昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得十...
摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。 昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得十...
閱讀 4361·2021-11-22 09:34
閱讀 2689·2021-11-12 10:36
閱讀 742·2021-08-18 10:23
閱讀 2636·2019-08-30 15:55
閱讀 3110·2019-08-30 15:53
閱讀 2081·2019-08-30 15:44
閱讀 1361·2019-08-29 15:37
閱讀 1401·2019-08-29 13:04