首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现简易版的刮刮乐效果

Posted in HTML / CSS onSeptember 27, 2016

效果图

CSS3实现简易版的刮刮乐效果

代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>CSS3模拟刮刮乐</title>  
  7.     <style type="text/css" media="screen">  
  8.     .card {   
  9.         border: 1px solid #000;   
  10.         -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;   
  11.                 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;   
  12.         border-radius: 3%;   
  13.         width: 20rem;   
  14.         height: 30rem;   
  15.         background: -webkit-gradient(linear, left top, left bottom, from(#EEE5E5), to(#FCE4E4));   
  16.         background: -webkit-linear-gradient(top, #EEE5E5, #FCE4E4);   
  17.         background: linear-gradient(180deg, #EEE5E5, #FCE4E4);   
  18.     }   
  19.   
  20.     .title,   
  21.     .ad-desrc {   
  22.         margin: 0;   
  23.         text-align: center;   
  24.         padding: 30px 0;   
  25.     }   
  26.     .ad-desrc{   
  27.         color: #bbb;   
  28.         font-size: 12px;   
  29.     }   
  30.   
  31.     .card-head,   
  32.     .card-footer {   
  33.         height: 25%;   
  34.         width: 100%;   
  35.     }   
  36.   
  37.     .card-body {   
  38.         height: 50%;   
  39.         width: 100%;   
  40.     }   
  41.   
  42.     .award-desrc {   
  43.         padding: 0 30px;   
  44.         margin: 5px auto;   
  45.         text-align: left;   
  46.     }   
  47.   
  48.     .award-scan {   
  49.         text-align: center;   
  50.         font-size: 20px;   
  51.         font-weight: 700;   
  52.         width: 80%;   
  53.         margin: 15px auto;   
  54.         padding: 30px 10px;   
  55.         /* 高斯模糊主要由这两句操控，文字透明及阴影半径 */   
  56.         color: transparent;   
  57.         -webkit-box-shadow: 0 0 5px rgba(178, 178, 178, 1);   
  58.                 box-shadow: 0 0 5px rgba(178, 178, 178, 1);   
  59.     }   
  60.     </style>  
  61. </head>  
  62.   
  63. <body>  
  64.     <p>非常简易版的刮刮乐模拟，搭配JS更加【禁用和启用选中功能】</p>  
  65.     <div class="card">  
  66.         <div class="card-head">  
  67.             <h1 class="title">CRPER刮刮乐</h1>  
  68.         </div>  
  69.         <div class="card-body">  
  70.             <h1 class="award-desrc">刮奖区域:</h1>  
  71.             <p class="award-scan">恭喜您中了逗逼大奖！！</p>  
  72.         </div>  
  73.         <div class="card-footer">  
  74.             <h4 class="ad-desrc">走过路过不要错过啊！！！</h4>  
  75.         </div>  
  76.     </div>  
  77. </body>  
  78.   
  79. </html>  

总结

这个效果实现起来相当简单，稍微需要注意是卡牌的装饰用了渐变；

配合JS,可以控制在某种条件下才能选中内容(查看内容)

pc 可以控制mousedown来禁止，也可以用CSS的一个规则user-select【考虑兼容需要考虑前缀】

移动端可以控制touchstart~touchend来实现达到条件选中；

最后说一句，做着玩的。选中看到内容，用户体验不是很好，不能控制过渡效果；此教程只是CSS3一些特性的小技巧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3实现简易版的刮刮乐效果

- Author -

crper

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
纯DOM+CSS3实现简单的小风车动画
Sep 27 #HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 #HTML / CSS
CSS3 media queries + jQuery实现响应式导航
Sep 30 #HTML / CSS
CSS3中的元素过渡属性transition示例详解
Nov 30 #HTML / CSS
CSS3 3D立方体效果示例－transform也不过如此
Dec 05 #HTML / CSS
前端制作动画的几种方式（css3，js）
Dec 12 #HTML / CSS
CSS3 三维变形实现立体方块特效源码
Dec 15 #HTML / CSS
广播(8) 保养(1) 长波(3) 收音机(62) 怀旧期刊(1) 烈阳天道(2) 中学科技(1) 无线电(12) 下载(1) 短波(8)
You might like
Home Coffee Roasting
2021/03/03 咖啡文化
php中Snoopy类用法实例
2015/06/19 PHP
PHP操作redis实现的分页列表，新增，删除功能封装类与用法示例
2018/08/04 PHP
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
js函数调用的方式
2014/05/06 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
原生js实现日期联动
2015/01/12 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01：选手知多少
2021/03/11 DOTA
python 截取 取出一部分的字符串方法
2017/03/01 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
django做form表单的数据验证过程详解
2019/07/26 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
Debenhams爱尔兰：英国知名的百货公司
2017/01/02 全球购物
官方授权图形T恤和服装：Fifth Sun
2019/06/12 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么？
2015/11/18 面试题
XML文档定义有几种形式？它们之间有何本质区别？解析XML文档有哪几种方式？
2016/01/12 面试题
电大本科自我鉴定
2014/02/05 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
二手房购房意向书范本
2014/04/01 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
交通志愿者活动总结
2014/06/27 职场文书
课外访万家心得体会
2014/09/03 职场文书
网站出售协议书范文
2014/10/10 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
php png失真的原因及解决办法
2021/11/17 PHP
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
Python实现信息管理系统
2022/06/05 Python
java实现面板之间切换功能
2022/06/10 Java/Android