CSS3：实现非常非常简易版的刮刮乐

最新推荐文章于 2024-05-16 02:23:34 发布

crper

最新推荐文章于 2024-05-16 02:23:34 发布

阅读量5.7k

点赞数 13

分类专栏：笔记-HTML4&amp;5/CSS2.1&amp;3 CSS3及HTML5折腾记文章标签： css3 刮刮乐 css3刮刮乐 css3渐变 css3高斯

本文链接：https://blog.csdn.net/crper/article/details/52632623

版权

笔记-HTML4&5/CSS2.1&3 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

CSS3及HTML5折腾记

23 篇文章 25 订阅

订阅专栏

概述

心血来潮搞了个非常非常简易版本的刮刮乐；

效果图

这里写图片描述

代码

<!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>