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

效果图

代码

XML/HTML Code复制内容到剪贴板

<!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>非常简易版的刮刮乐模拟，搭配JS更加【禁用和启用选中功能】</p>
<div class="card"> <div class="card-head">
<h1 class="title">CRPER刮刮乐</h1> </div>
<div class="card-body"> <h1 class="award-desrc">刮奖区域:</h1>
<p class="award-scan">恭喜您中了逗逼大奖！！</p> </div>
<div class="card-footer"> <h4 class="ad-desrc">走过路过不要错过啊！！！</h4>
</div> </div>
</body>
</html>

上一篇：利用纯CSS自定义Checkbox和Radio的样式示例代码

下一篇：CSS3中的元素过渡属性transition示例详解

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注