CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂效果
發(fā)布時(shí)間:2016-09-27 16:42:23 作者:crper
我要評(píng)論

大家應(yīng)該都玩過刮刮樂,如何實(shí)現(xiàn)刮刮樂效果,這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)簡(jiǎn)易版的刮刮樂效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
效果圖
代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!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 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;
- 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>非常簡(jiǎn)易版的刮刮樂模擬,搭配JS更加【禁用和啟用選中功能】</p>
- <div class="card">
- <div class="card-head">
- <h1 class="title">CRPER刮刮樂</h1>
- </div>
- <div class="card-body">
- <h1 class="award-desrc">刮獎(jiǎng)區(qū)域:</h1>
- <p class="award-scan">恭喜您中了逗逼大獎(jiǎng)!!</p>
- </div>
- <div class="card-footer">
- <h4 class="ad-desrc">走過路過不要錯(cuò)過?。。?!</h4>
- </div>
- </div>
- </body>
- </html>
總結(jié)
這個(gè)效果實(shí)現(xiàn)起來相當(dāng)簡(jiǎn)單,稍微需要注意是卡牌的裝飾用了漸變;
配合JS,可以控制在某種條件下才能選中內(nèi)容(查看內(nèi)容)
pc 可以控制mousedown來禁止,也可以用CSS的一個(gè)規(guī)則user-select【考慮兼容需要考慮前綴】
移動(dòng)端可以控制touchstart~touchend來實(shí)現(xiàn)達(dá)到條件選中;
最后說一句,做著玩的。選中看到內(nèi)容,用戶體驗(yàn)不是很好,不能控制過渡效果;此教程只是CSS3一些特性的小技巧。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這是一款實(shí)現(xiàn)js 3D旋轉(zhuǎn)木馬特效插件。該插件通過CSS3和純js來完成,可中間以3D旋轉(zhuǎn)的方式來展示一組圖片,歡迎下載2019-08-16
css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼
這篇文章主要介紹了css3實(shí)現(xiàn)橢圓軌跡旋轉(zhuǎn)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-29微信小程序?qū)崿F(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)可實(shí)時(shí)改變轉(zhuǎn)速的css3旋轉(zhuǎn)動(dòng)畫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2018-09-11- 本篇文章主要介紹了CSS3打造百度貼吧的3D翻牌效果示例,非常具有實(shí)用價(jià)值,有想去的可以了解一下。2017-01-04
- 本文給大家分享的是一則使用原生CSS3實(shí)現(xiàn)的圖片翻牌效果,十分的炫酷,代碼卻很簡(jiǎn)單,這里推薦給有相同需求的小伙伴們。2015-03-10
css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果
本文通過實(shí)例代碼給大家介紹了css實(shí)現(xiàn)旋轉(zhuǎn)翻牌動(dòng)畫效果,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-10-09