如何用前端技术写一个红包封面？

最新推荐文章于 2024-02-04 11:46:58 发布

雷特IT

最新推荐文章于 2024-02-04 11:46:58 发布

阅读量721

点赞数

分类专栏：微信界面实现文章标签： javascript ecmascript 前端 css3 html

本文链接：https://blog.csdn.net/m0_54066656/article/details/129895315

版权

微信界面实现专栏收录该内容

3 篇文章 1 订阅

订阅专栏

书接前文，微信界面设计

既然已经写好了主要的界面，如上图。

实施过程：

那么我们就开始做红包展示界面，如下图：

当然啦，为了防止红包页面有问题，这次就先新开一个文件，进行设计。

其实，整个代码的实现还是很简单的。

红包形状：

我们先画一个框框，我们这里定义为window。

<div class = 'window'>

</div>

它的css样式是这样的：

.window {
            display: block;
            margin: auto;
            width: 260px;
            height: 460px;
            position: relative;
            border-radius: 36px;
            background-color: rgb(230, 0, 0);
            /* 层级为1，最高层 */
            z-index: 1;
        }

先在浏览器看看实现效果怎么样先：

开红包按钮：

然后，我们再画出红包上的“开”按钮：

<div class="window">
    <div class="open">
        <button onclick="hide()">开</button>
    </div>
</div>

至于这个onclick是啥，下期集成的时候我们再说。

CSS是这样的：

.open>button {
            cursor: pointer;
            position: relative;
            transform: translate(105px, 8px);
            width: 50px;
            height: 50px;
            border: 0;
            border-radius: 50%;
            background: rgb(255, 215, 0);
            z-index: 2;
        }

浏览器效果是这样的：

×按钮：

在微信里面是有个小叉的，我可以选择不接受你的红包。

所以我们还得增加一个×按钮：

<div class="window">
        <div class="open">
            <button onclick="hide()">开</button>
            <!-- <input type="button" value="×" onclick="hide()"> -->
        </div>
    </div>

CSS是这样的：

.open>input {
            cursor: pointer;
            position: relative;
            transform: translate(65px, 136px);
            width: 20px;
            height: 20px;
            background: rgb(255, 215, 0);
            border: 0;
            border-radius: 50%;
        }

效果是这样的：

增加点细节：

效果图：

最后

其实这个页面实现起来还是非常简单的，没有什么特别大的难度。

一些地方我是提前做好了设计，为之后移植到微信代码做了一些铺垫。

代码解合：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .window {
            display: block;
            margin: auto;
            width: 260px;
            height: 460px;
            position: relative;
            border-radius: 36px;
            background-color: rgb(230, 0, 0);
            /* 层级为1，最高层 */
            z-index: 1;
        }

        .open>.cir {
            overflow: hidden;
            position: relative;
            top: 36px;
            width: 260px;
            height: 324px;
            border-bottom: 2px solid rgb(255, 215, 0);
            border-radius: 72px 72px 480px 480px;
            background-color: rgb(230, 0, 0);
            z-index: 1;
        }

        .open>button {
            cursor: pointer;
            position: relative;
            transform: translate(105px, 8px);
            width: 50px;
            height: 50px;
            border: 0;
            border-radius: 50%;
            background: rgb(255, 215, 0);
            z-index: 2;
        }

        .open>input {
            cursor: pointer;
            position: relative;
            transform: translate(65px, 136px);
            width: 20px;
            height: 20px;
            background: rgb(255, 215, 0);
            border: 0;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="window">
        <div class="open">
            <div class="cir"></div>
            <button onclick="hide()">开</button>
            <input type="button" value="×" onclick="hide()">
        </div>
    </div>
</body>

</html>

其中的cir是增加的细节，微信红包是有一个弧度的，所以我们这里增加了一个弧度，然后上面写好的开红包按钮，和×按钮，就会自动出现在它该出现的位置了。

下期，继续讲解，敬请关注。