效果图
代码
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一些特性的小技巧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
