玩骰子麼

来源:http://www.cnblogs.com/puyongsong/archive/2016/11/24/6099092.html
-Advertisement-
Play Games

本demo應用了css3 transition animate，若有相容性問題，請升級你的瀏覽器！ 這次先讓大家玩玩！ 結構層 表現層 動畫的屬性值可以隨便調。 骰子的每個面的公共樣式 點數容器的公共樣式 行為層 <!doctype html> <html> <head> <meta charset ...


本demo應用了css3 transition animate，若有相容性問題，請升級你的瀏覽器！

這次先讓大家玩玩！

結構層

ul骰子容器包裹6個面li；每個面裡面包裹一個點數容器div.c-num用於position；最後就是調點數p的樣式了。
<ul class="container">
        <li class="lf">
            <div class="c-num">
                <p class="num1"></p>
            </div>
        </li>
        <li class="rt">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
            </div>
        </li>
        <li class="top">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
            </div>
        </li>
        <li class="btm">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
                <p class="num6"></p>
            </div>
        </li>
        <li class="in">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
            </div>
        </li>
        <li class="out">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
            </div>
        </li>
    </ul>

表現層

ul,li,div,p{margin:0;padding:0;}
.container{
            position:relative;
            list-style:none;
}
先將容器ul相對定位，在將li絕對定位，則每個面li都在左上角便於rotate
transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);
過渡xy方向以及旋轉 參考W3C http://www.w3school.com.cn/cssref/pr_transform.asp
transform-style:preserve-3d;
嵌套元素以3d展示 http://www.w3school.com.cn/cssref/pr_transform-style.asp
transform-origin:50px 50px;
旋轉中心位置http://www.w3school.com.cn/cssref/pr_transform-origin.asp
animation:nickAnimate 5s ease infinite;
動畫調用http://www.w3school.com.cn/cssref/pr_animation.asp
animation-fill-mode:forwards;
規定動畫完成後停留在最後一幀http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp
animation-play-state:paused;
預設為paused，不然頁面刷新會自動執行動畫的http://www.w3school.com.cn/cssref/pr_animation-play-state.asp
@keyframes nickAnimate{/*動畫定義*/
            0%{
                transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:translate(130px,120px) rotateX(1360deg) rotateY(1360deg);
            }
        }

動畫的屬性值可以隨便調。

.container>li{
            position:absolute;
            width:100px;height:100px;
            border-radius:15px;
            background:#DDDBE6;
            overflow:hidden;
            border:1px solid #ddd;
        }

骰子的每個面的公共樣式

將每個面rotate成一個立方體
.lf{
            transform:rotateY(90deg) translateZ(-50px);
        }
        .rt{
            transform:translateX(100px) rotateY(90deg) translateZ(-50px);
        }
        .top{
            transform:translateY(-50px) rotateX(90deg);
        }
        .btm{
            transform:translateY(50px) rotateX(90deg);
        }
        .in{
            transform:translateZ(50px);
        }
        .out{
            transform:translateZ(-50px);
        }
現在可以看到一個立方體了吧，下麵就是一些定位樣式渲染成骰子的樣子

點數容器的公共樣式

.c-num{/*點數容器*/
            position:relative;
            width:100%;
            height:100%;
            background:radial-gradient(#fff 35%,#DDDBE6);
        }
點數公用樣式 我把每個點都居中了，然後在translate，其實直接translate或者position也可以，仁者見仁智者見智吧
p[class^='num']{
            position:absolute;
            width:20px;
            height:20px;
            background-color:red;
            border-radius:50%;

            top:50%;left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }
下麵就是點數p的樣式微調了
/*點數1的面已經居中*/
        .lf .num1{}
        /*點數2的面translate慢慢調吧*/
        .in .num1{
            transform:translate(-5px,-20px);
        }
        .in .num2{
            transform:translate(-5px,20px);
        }
        /*點數3的面*/
        .rt .num1{
            transform:translate(-5px,-30px);
        }
        .rt .num2{
            transform:translateX(-5px);
        }
        .rt .num3{
            transform:translate(-5px,30px);
        }
        /*點數4的面*/
        .out .num1{
            transform:translate(-20px,20px);
        }
        .out .num2{
            transform:translate(-20px,-20px);
        }
        .out .num3{
            transform:translate(20px,20px);
        }
        .out .num4{
            transform:translate(20px,-20px);
        }
        /*點數5的面*/
        .top .num1{
            transform:translate(25px,-30px);
        }
        .top .num2{
            transform:translate(-25px,-30px);
        }
        .top .num4{
            transform:translate(-25px,25px);
        }
        .top .num5{
            transform:translate(25px,25px);
        }
        /*點數6的面*/
        .btm .num1{
            transform:translate(-25px,30px);
        }
        .btm .num2{
            transform:translate(-25px,0px);
        }
        .btm .num3{
            transform:translate(-25px,-30px);
        }
        .btm .num4{
            transform:translate(15px,30px);
        }
        .btm .num5{
            transform:translate(15px,0px);
        }
        .btm .num6{
            transform:translate(15px,-30px);
        }

行為層

document.getElementsByClassName('run')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='running';
    };
    document.getElementsByClassName('paused')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='paused';
    };
搖啊搖、暫停按鈕就是控制animate的運行狀態
ok！上完整代碼有興趣的玩玩吧！
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
    <title>css3 骰子 animate nick</title>
    <style>
        /*先將容器ul相對定位，在將li絕對定位，則每個面li都在左上角便於rotate*/
        ul,li,div,p{margin:0;padding:0;}
        .container{
            position:relative;
            list-style:none;
            transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);/*過渡xy方向以及旋轉http://www.w3school.com.cn/cssref/pr_transform.asp*/
            transform-style:preserve-3d;/*嵌套元素以3d展示 http://www.w3school.com.cn/cssref/pr_transform-style.asp*/
            transform-origin:50px 50px;/*旋轉中心位置http://www.w3school.com.cn/cssref/pr_transform-origin.asp*/

            animation:nickAnimate 5s ease infinite;/*動畫調用http://www.w3school.com.cn/cssref/pr_animation.asp*/
            animation-fill-mode:forwards;/*規定動畫完成後停留在最後一幀http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp*/
            animation-play-state:paused;/*預設為paused，不然頁面刷新會自動執行動畫的http://www.w3school.com.cn/cssref/pr_animation-play-state.asp*/
        }
        @keyframes nickAnimate{/*動畫定義*/
            0%{
                transform:translate(100px,100px) rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:translate(130px,120px) rotateX(1360deg) rotateY(1360deg);
            }
        }
        .container>li{
            position:absolute;
            width:100px;height:100px;
            border-radius:15px;
            background:#DDDBE6;
            overflow:hidden;
            border:1px solid #ddd;
        }
        /*將每個面rotate成一個立方體*/
        .lf{
            transform:rotateY(90deg) translateZ(-50px);
        }
        .rt{
            transform:translateX(100px) rotateY(90deg) translateZ(-50px);
        }
        .top{
            transform:translateY(-50px) rotateX(90deg);
        }
        .btm{
            transform:translateY(50px) rotateX(90deg);
        }
        .in{
            transform:translateZ(50px);
        }
        .out{
            transform:translateZ(-50px);
        }
        /*現在可以看到一個立方體了吧，下麵就是一些定位樣式渲染成骰子的樣子*/
        .c-num{/*點數容器*/
            position:relative;
            width:100%;
            height:100%;
            background:radial-gradient(#fff 35%,#DDDBE6);
        }
        p[class^='num']{/*點數公用樣式 我把每個點都居中了，然後在translate，其實直接translate或者position也可以，仁者見仁智者見智吧*/
            position:absolute;
            width:20px;
            height:20px;
            background-color:red;
            border-radius:50%;

            top:50%;left:50%;
            margin-top:-5px;
            margin-left:-5px;
        }
        /*點數1的面已經居中*/
        .lf .num1{}
        /*點數2的面translate慢慢調吧*/
        .in .num1{
            transform:translate(-5px,-20px);
        }
        .in .num2{
            transform:translate(-5px,20px);
        }
        /*點數3的面*/
        .rt .num1{
            transform:translate(-5px,-30px);
        }
        .rt .num2{
            transform:translateX(-5px);
        }
        .rt .num3{
            transform:translate(-5px,30px);
        }
        /*點數4的面*/
        .out .num1{
            transform:translate(-20px,20px);
        }
        .out .num2{
            transform:translate(-20px,-20px);
        }
        .out .num3{
            transform:translate(20px,20px);
        }
        .out .num4{
            transform:translate(20px,-20px);
        }
        /*點數5的面*/
        .top .num1{
            transform:translate(25px,-30px);
        }
        .top .num2{
            transform:translate(-25px,-30px);
        }
        .top .num4{
            transform:translate(-25px,25px);
        }
        .top .num5{
            transform:translate(25px,25px);
        }
        /*點數6的面*/
        .btm .num1{
            transform:translate(-25px,30px);
        }
        .btm .num2{
            transform:translate(-25px,0px);
        }
        .btm .num3{
            transform:translate(-25px,-30px);
        }
        .btm .num4{
            transform:translate(15px,30px);
        }
        .btm .num5{
            transform:translate(15px,0px);
        }
        .btm .num6{
            transform:translate(15px,-30px);
        }
    </style>
</head>
<body>
   <!--功能-運行、暫停按鈕-->
    <button class="run">搖啊搖</button>
    <button class="paused">暫停</button>
   <!--骰子的結構-->
   <!--骰子容器包裹6個面；每個面裡面包裹一個點數容器用於position；最後就是調點數樣式了-->
    <ul class="container">
        <li class="lf">
            <div class="c-num">
                <p class="num1"></p>
            </div>
        </li>
        <li class="rt">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
            </div>
        </li>
        <li class="top">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
            </div>
        </li>
        <li class="btm">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
                <p class="num5"></p>
                <p class="num6"></p>
            </div>
        </li>
        <li class="in">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
            </div>
        </li>
        <li class="out">
            <div class="c-num">
                <p class="num1"></p>
                <p class="num2"></p>
                <p class="num3"></p>
                <p class="num4"></p>
            </div>
        </li>
    </ul>
<script>
//    搖啊搖、暫停按鈕就是控制animate的運行狀態
    document.getElementsByClassName('run')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='running';
    };
    document.getElementsByClassName('paused')[0].onclick=function(){
        document.getElementsByClassName('container')[0].style.animationPlayState='paused';
    };
</script>
</body>
</html>
View Code 
　　　畢竟還年少，自我感覺至少如此，有些玩心，大家有什麼新奇好的想法可以給我留言或在我的博客首頁qq交流，願我們在娛樂的過程中共同進步！
 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Lind.DDD.LindQueue的一些想法
    回到目錄 很久就想寫一套屬於自己的消息隊列組件，前段時候看了湯雪華同學的EQueue，感覺還是不錯的，他也是看了rabbitMQ之後寫的Equeue，在設計上與前者有類似的地方，而大叔這次準備寫一個LindQueue，當前整體架構都差不多，無非是生產者，管道，消費者三個角色，而核心部分就是管道Bro ...
  • JavaScript使用介面
    在經典的Java面向對象語言中，可以用關鍵字interface來定義介面，用implement來實現介面，而JavaScript雖然也是面向對象語言，但是它並沒有內置這些，不過由於JavaScript的靈活性，我們可以通過模擬來實現，方法是使用一個輔助類和輔助函數來協助完成這一過程。 ...
  • JS幾種變數交換方式以及性能分析對比
    原文 原文是自己博客上發佈的 "JS幾種變數交換方式以及性能分析對比" 前言 “兩個變數之間的值得交換”，這是一個經典的話題，現在也有了很多的成熟解決方案，本文主要是列舉幾種常用的方案，進行大量計算並分析對比。 起由 最近做某個項目時，其中有一個需求是交換數組中的兩個元素。當時使用的方法是: arr ...
  • CSS選擇器：基礎選擇器、關係選擇器、屬性選擇器、偽類選擇器、偽類選擇器等；
    CSS選擇器：基礎、關係、屬性、偽類、偽對象等； 選擇器優先順序的計算：style=1000(內聯樣式表) ID=100 class=10 element=1 1. 基礎選擇器 ID>class>element>* 2. 關係選擇器 1.包含（後代）選擇器 E F E為F的外層元素 2.子選擇器 E> ...
  • HTML 導航框架
    首頁效果圖 點擊鏈接一效果圖 代碼結構 index.jsp top.jsp left.jsp right.jsp bottom.jsp link1.jsp link2.jsp link3.jsp ...
  • 隱藏Layer中的Iframe內部元素
    隱藏Layer中的Iframe內部元素 1.Layer:一個web彈出層/窗解決方案 2.隱藏Layer彈出層中Iframe內部的元素，例子如下： 這個就是在Layer彈出層內的內容，載入完畢之後，獲取彈出層的內容。Success的回調函數中的第二行就是獲取iframe內id為foot的元素，然後調... ...
  • 彩票，隨機一註效果
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> #btn { height: 30px; width: 100px; border: 1p ...
  • JS製作計算器（鍵盤版）
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #show { width: 232px; height: 80px; color: white; border- ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類