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

时间：2021-05-08

效果图

代码

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>

</body>

</html>

总结

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

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

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

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

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

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

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

相关文章

原生JavaScript实现刮刮乐

JavaScript实现刮刮乐效果

Android实现刮刮乐示例分析

canvas实现刮刮卡效果

Android刮刮乐效果-proterDuffXfermode的示例代码