效果图
代码
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>CSS3模拟刮刮乐</title> <styletype="text/css"media="screen"> .card{ border:1pxsolid#000; -webkit-box-shadow:1px1px2pxrgba(77,73,73,1.0),-1px-1px2pxrgba(77,73,73,1.0),001pxrgba(77,73,73,1.0)inset; box-shadow:1px1px2pxrgba(77,73,73,1.0),-1px-1px2pxrgba(77,73,73,1.0),001pxrgba(77,73,73,1.0)inset; border-radius:3%; width:20rem; height:30rem; background:-webkit-gradient(linear,lefttop,leftbottom,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:30px0; } .ad-desrc{ color:#bbb; font-size:12px; } .card-head, .card-footer{ height:25%; width:100%; } .card-body{ height:50%; width:100%; } .award-desrc{ padding:030px; margin:5pxauto; text-align:left; } .award-scan{ text-align:center; font-size:20px; font-weight:700; width:80%; margin:15pxauto; padding:30px10px; /*高斯模糊主要由这两句操控，文字透明及阴影半径*/ color:transparent; -webkit-box-shadow:005pxrgba(178,178,178,1); box-shadow:005pxrgba(178,178,178,1); } </style> </head> <body> <p>非常简易版的刮刮乐模拟，搭配JS更加【禁用和启用选中功能】</p> <divclass="card"> <divclass="card-head"> <h1class="title">CRPER刮刮乐</h1> </div> <divclass="card-body"> <h1class="award-desrc">刮奖区域:</h1> <pclass="award-scan">恭喜您中了逗逼大奖！！</p> </div> <divclass="card-footer"> <h4class="ad-desrc">走过路过不要错过啊！！！</h4> </div> </div> </body> </html>
总结
这个效果实现起来相当简单，稍微需要注意是卡牌的装饰用了渐变；
配合JS,可以控制在某种条件下才能选中内容(查看内容)
pc 可以控制mousedown来禁止，也可以用CSS的一个规则user-select【考虑兼容需要考虑前缀】
移动端可以控制touchstart~touchend来实现达到条件选中；
最后说一句，做着玩的。选中看到内容，用户体验不是很好，不能控制过渡效果；此教程只是CSS3一些特性的小技巧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【CSS3实现简易版的刮刮乐效果】相关文章：