實現非常非常簡易版的刮刮樂（NoJS）

阿新 • • 發佈：2019-02-11

概述

心血來潮搞了個非常非常簡易版本的刮刮樂；

效果圖

這裡寫圖片描述

程式碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3模擬刮刮樂</title>
    <style type="text/css" media="screen">
    .card {
        border: 1px solid #000;
        -webkit-box-shadow: 1px 1 
px 2px rgba(77, 73, 73, 1.0), -1px -1px 2px rgba(77, 73, 73, 1.0), 0 0 1px rgba(77, 73, 73, 1.0) inset;
                box-shadow: 1px 1px 2px rgba(77, 73, 73, 1.0), -1px -1px 2px rgba(77, 73, 73, 1.0), 0 0 1px rgba(77, 73, 73, 1.0) inset;
        border-radius: 3%;
        width: 20rem;
        height: 30rem;
        background 
: -webkit-gradient(linear, left top, left bottom, from(#EEE5E5), to(#FCE4E4));
        background: -webkit-linear-gradient(top, #EEE5E5, #FCE4E4);
        background: linear-gradient(180deg, #EEE5E5, #FCE4E4);
    }

    .title,
    .ad-desrc {
        margin: 0;
        text-align: center;
        padding 
: 30px 0;
    }
    .ad-desrc{
        color: #bbb;
        font-size: 12px;
    }

    .card-head,
    .card-footer {
        height: 25%;
        width: 100%;
    }

    .card-body {
        height: 50%;
        width: 100%;
    }

    .award-desrc {
        padding: 0 30px;
        margin: 5px auto;
        text-align: left;
    }

    .award-scan {
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        width: 80%;
        margin: 15px auto;
        padding: 30px 10px;
        /* 高斯模糊主要由這兩句操控，文字透明及陰影半徑 */
        color: transparent;
        -webkit-box-shadow: 0 0 5px rgba(178, 178, 178, 1);
                box-shadow: 0 0 5px rgba(178, 178, 178, 1);
    }
    </style>
</head>

<body>
    <p>非常簡易版的刮刮樂模擬，搭配JS更加【禁用和啟用選中功能】</p>
    <div class="card">
        <div class="card-head">
            <h1 class="title">CRPER刮刮樂</h1>
        </div>
        <div class="card-body">
            <h1 class="award-desrc">刮獎區域:</h1>
            <p class="award-scan">恭喜您中了逗逼大獎！！</p>
        </div>
        <div class="card-footer">
            <h4 class="ad-desrc">走過路過不要錯過啊！！！</h4>
        </div>
    </div>
</body>

</html>

總結

這個效果實現起來相當簡單，稍微需要注意是卡牌的裝飾用了漸變；
配合JS,可以控制在某種條件下才能選中內容(檢視內容)

pc 可以控制mousedown來禁止，也可以用CSS的一個規則user-select【考慮相容需要考慮字首】
移動端可以控制touchstart~touchend來實現達到條件選中；

最後說一句，做著玩的。。。選中看到內容，使用者體驗不是很好，不能控制過渡效果；此教程只是CSS3一些特性的小技巧

實現非常非常簡易版的刮刮樂（NoJS）

概述心血來潮搞了個非常非常簡易版本的刮刮樂；效果圖程式碼 <!DOCTYPE html> <html lang="en"> <head

實現一個C語言版的JSON庫（1）

什麼是JSON JSON（JavaScript Object Notation）是一個用於資料交換的文字格式，它源至於 JavaScript 語言，但它本身只是一種資料格式，可用於任何程式語言。現時具類似功能的格式有 XML等。一個典型的JSON文字如下：

C/S模型-多程序-簡易版學生-管理系統（帶資料庫）

簡介：【1】資料：　　學生資訊：姓名name + 賬號account + 分數score 　　登入資訊：賬號account + 密碼password（學生、管理員）【2】C/S模型，使用fork實現多程序互動【3】Client：　　1）登入：學生登入，管理員登陸　　2）管理員：修改密

實現一個簡易的vue的mvvm（defineProperty）

這是一個最近一年很火的面試題，很多人看到這個題目從下手，其實查閱一些資料後，簡單的模擬還是不太難的： vue不相容IE8以下是因為他的實現原理使用了 Object.defineProperty 的get和set方法，首先簡單介紹以下這個方法我們看到控制檯

Unity學習筆記1 簡易2D橫版RPG遊戲製作（一）

這個教程是參考一個YouTube上面的教程做的，原作者的教程做得比較簡單，我先參考著做一遍，畢竟我也只是個初學者，還沒辦法完全自制哈哈。不過我之前也看過一個2D平臺遊戲的系列教程了，以後會整合起來，做出一個類似冒險島那樣的遊戲。原視訊連結：點選開啟連結這是個YouT

Unity學習筆記2 簡易2D橫版RPG遊戲製作（二）

十二、敵人受攻擊時的閃爍和Player的生命值的修正上一篇中，我們利用Controller2D中的IEnumerator TakenDamage介面，使得我們的Player受到攻擊時會進行閃爍，我們同樣地也希望在我們的敵人身上可以實現相同的效果。所以我們現在需要複製Con

非常實用的PHP常用函式彙總（一）

1、PHP加密解密 PHP加密和解密函式可以用來加密一些有用的字串存放在資料庫裡，並且通過可逆解密字串，該函式使用了base64和MD5加密和解密。程式碼如下: function encryptDecrypt($key, $string, $decr

matlab 實現感知機線性二分類算法（Perceptron）

簡單的 learning 取值 fun end 隨機 -1 二維技術分享感知機是簡單的線性分類模型，是二分類模型。其間用到隨機梯度下降方法進行權值更新。參考他人代碼，用matlab實現總結下。權值求解過程通過Perceptron.m函數完成 function W

CSS百分比padding實現比例固定圖片自適應布局（轉載）

缺失 com 我們展現 auto ie6 iphone7 恰恰備案一、CSS百分比padding都是相對寬度計算的在默認的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對於寬度計算的，這個和top, bottom等屬性的百分比

HTML5 file API加canvas實現圖片前端JS壓縮並上傳（轉載）

www. 手機回調 pre lan 瀏覽器中 rdp 效果二進制一、圖片上傳前端壓縮的現實意義對於大尺寸圖片的上傳，在前端進行壓縮除了省流量外，最大的意義是極大的提高了用戶體驗。這種體驗包括兩方面：由於上傳圖片尺寸比較小，因此上傳速度會比較快，交互會更

Zabbix實戰-簡易教程--宏變量（Macro）

zab logs 名稱 es2017 lld 註意 blog 觸發場景一、概述 Zabbix支持許多在多種情況下使用的宏。宏是一個變量，由如下特殊語法標識：MACRO 有效地使用宏可以節省時間，並使Zabbix變地更加高效。在一個的典型用途中，宏可以用於模板中。因此，

Zabbix實戰-簡易教程--低層次發現（LLD）

a-z http ext sector iops 服務自定義 clas lan 一、概述自動發現（LLD）提供了一種在為不同實體自動創建監控項，觸發器和圖形的方法。例如，Zabbix可以在你的機器上自動監控磁盤或網卡，而無需為每個磁盤或網卡手動創建監控項。（LLD）

利用愛奇藝開放平臺實現視頻托管回調播放（一）——獲取授權

con new 在線 resp 麻煩簡介回調其他人擔心背景：　　題庫軟件的教學視頻需要實現在線播放，由於技術水平和服務器配置的限制，如果把視頻放在自己服務器上會出現各種問題。訪問人數少的時候還可以勉強應付，臨近考試時，服務器壓力增大，視頻訪問延遲太大，有時根本無

用C#通過反射實現動態調用WebService 告別Web引用（轉載）

sse data 語言 con classname ext 級別 creat 字符我們都知道，調用WebService可以在工程中對WebService地址進行WEB引用，但是這確實很不方便。我想能夠利用配置文件靈活調用WebService。如何實現呢？用C#通過反射

Virtex6 PCIe 超簡版基礎概念學習（一）

shiro多realm驗證之——shiro實現不同身份使用不同Realm進行驗證（轉）

manager 數據表 edi 用戶驗證 clas tails oauth false bject 轉自:　http://blog.csdn.net/xiangwanpeng/article/details/54802509

Html+JS+PowerShell打造Web版AD管理系統（二）

跨域 owin powershell restful Webapi 最近發現gihub上早已有人把powershell的restful webapi做好了，而且是自宿主的owin。比上次用到的httplistener健壯許多。貌似還是支持job，runspace的。https://gith

Exchange 2016與國內版O365混合部署（4）：配置Exchange 公網證書

導入 mtp targe 新建 lan 創建 image AD alt Exchange混合部署需要安裝一個第三方權威機構頒發的公網證書，用於郵件流的安全傳輸，詳細的步驟technet也有寫： https://technet.microsoft.com/zh-cn/l

Exchange 2016與國內版O365混合部署（6）：混合後的操作和驗證

分享圖片 In 報告 mailbox inf 通訊錄 png 完成後動手雲端和本地統一的通訊錄： AAD Connect 目錄同步後，登錄O365管理員界面查看用戶，可以看到本地的兩個用戶已經同步上來了，同步類型顯示已與AD同步。登錄一個雲端用戶的郵箱，在收件人處輸

SpringCloud之實現服務器端的負載均衡Ribbon（二）

del 服務端 gem ring rest span 17. dex eight 一 Ribbon簡介 Ribbon是Netflix發布的負載均衡器，它有助於控制HTTP和TCP的客戶端的行為。為Ribbon配置服務提供者地址後，Ribbon就可基於某種負載均衡算法，自

實現非常非常簡易版的刮刮樂（NoJS）

概述

效果圖

程式碼

總結

相關推薦