CSS3實現簡易版的刮刮樂效果

2024-07-11 08:25:47

字體：大中小

來源：轉載

供稿：網友

效果圖

代碼

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>