红包封面整蛊页面附源码|一键生成-山海云端论坛

前言

快过年了红包封面这个功能也是慢慢的火起来了，然后就有了整蛊页面，大家玩玩就好。

效果展示

在线体验

和官方的一样，但是点开后…..

如果网友点击了领取便使用，就会陷入疯狂的弹窗中

可谓是脑洞大开！

一键生成

我们支持一键生成页面，方便没有服务器的网友们使用，生成后直接发给网友就好啦

一键生成

输入名字点击立即制作即可

生成后我们可以发网址或二维码发给对方

点开后就是你生成的红包页面了。

源码下载

<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,maximum-scale=1,user-scalable=0,viewport-fit=cover">
    <title _msthash="61815" _msttexthash="746746"></title>
    <link href="https://res.wx.qq.com/a/wx_fed/money-envelope-cover/res/css/chunk-common.69733efd.css" rel="stylesheet">
    <link href="https://res.wx.qq.com/a/wx_fed/money-envelope-cover/res/css/red_cover.ab6aa076.css" rel="stylesheet">
    <style id="__WXWORK_INNER_SCROLLBAR_CSS">::-webkit-scrollbar { width: 12px !important; height: 12px !important; }::-webkit-scrollbar-track:vertical {  }::-webkit-scrollbar-thumb:vertical { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-scrollbar-track:horizontal {  }::-webkit-scrollbar-thumb:horizontal { background-color: rgba(136, 141, 152, 0.5) !important; border-radius: 10px !important; background-clip: content-box !important; border:2px solid transparent !important; } ::-webkit-resizer { display: none !important; }
    </style>
  
    <style class="mpa-style-fix ImageGatherer">.FotorFrame{position:fixed!important}</style><style class="mpa-style-fix SideFunctionPanel">.weui-desktop-online-faq__wrp{top:304px!important;bottom:unset!important}.weui-desktop-online-faq__wrp .weui-desktop-online-faq__switch{width:38px!important}</style>
    <script>
        function fun1(){
            
            alert('不是吧！这你也信？'); 
            alert('那么，你相信光吗？'); 
            alert('其实世界上并没有奥特曼'); 
            alert('有的只是千万人心中不灭的信仰');
            alert('2023 希望你能相信光🌞');
            alert('这个世界正在变得更好');
            alert('我们要相信');
            alert('美好的未来终会来临');
			alert('山海云端论坛：www.shserve.cn');
            window.close();
        }
  </script>
  </head>
  <body>
  
    
  
    <div data-v-521ffdeb="" class="red-cover-page show old-version">
    <div data-v-521ffdeb="" class="red-cover-mask">
    </div>
    <div data-v-521ffdeb="" class="wxHongbao_receive default">
    <div data-v-521ffdeb="" class="receive-status">
    <div data-v-521ffdeb="" class="receive-container">
    <div data-v-521ffdeb="" class="receive-icon-gift">
    </div>
    </div>
    <section data-v-521ffdeb="" class="receive-body">
    <section data-v-521ffdeb="" class="wxHongbao_info wxHongbao_amDefault wxHongbao_amFadeInDown">
    <div data-v-521ffdeb="" class="wxHongbao_info_nickname wxHongbao_text_line" _msthash="1829477" _msttexthash="13846274">山海</div>
    <div data-v-521ffdeb="" class="wxHongbao_info_body wxHongbao_text_line"><font _mstmutation="1" _msthash="1829620" _msttexthash="41545712">赠送给你一个红包封面</font><br data-v-521ffdeb="">
    </div>
    <div data-v-521ffdeb="" class="wxHongbao_info_corpname wxHongbao_text_line">
    <span data-v-521ffdeb="" _msthash="2318615" _msttexthash="17441021">迪迦奥特曼</span>
    </div>
    </section>
    <section data-v-521ffdeb="" class="wxHongbao_skinBg wxHongbao_amDefault wxHongbao_amFadeInDown2">
    <div data-v-521ffdeb="" class="wxHongbao_info_imgWrap">
    <div data-v-521ffdeb="" class="wxHongbao_info_img new" style="background-image: url(https://img1.baidu.com/it/u=972960129,475864807&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1734);">
    <div data-v-521ffdeb="" class="wxHongbao_info_imgMark">
  
    </div>
    </div>
    <div data-v-521ffdeb="" class="receive-success-body">
    <div data-v-521ffdeb="" class="msg-title" _msthash="2697253" _msttexthash="8760388">已领取</div>
    <div data-v-521ffdeb="" class="msg-desc" _msthash="2697396" _msttexthash="135554107">发红包时，可在"红包封面"中查看和使用该封面。</div></div></div></section>
  
  
    <section data-v-521ffdeb="" class="wxHongbao_receive_btn_wrap wxHongbao_amDefault wxHongbao_amFadeIn">
    <a href="javascript:;" onclick="fun1()" class="wxhognbao_btn" _msthash="1696006" _msttexthash="15549014">领取并使用</a>
    <div data-v-521ffdeb="" class="wxHongbao_receive_tip" _msthash="1830166" _msttexthash="31259371">领取后三个月内有效</div>
    </section></section>
    </div></div></div>
  
    
  
  
  </body></html>

我们将页面命名为index.html

修改教程

修改红包封面赠送者

这里我们显示的是山海，你可以按需修改

    <div data-v-521ffdeb="" class="wxHongbao_info_nickname wxHongbao_text_line" _msthash="1829477" _msttexthash="13846274">山海</div>

修改红包封面名称

这里的红包封面的主题叫今天你摸鱼了吗？你可以按需修改成自己设计的

    <span data-v-521ffdeb="" _msthash="2318615" _msttexthash="17441021">今天你摸鱼了吗？</span>

修改红包封面图片

代码第75行，你需要将https://img1.baidu.com/it/u=972960129,475864807&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1734替换为你的图片地址

    <div data-v-521ffdeb="" class="wxHongbao_info_img new" style="background-image: url(https://img1.baidu.com/it/u=972960129,475864807&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1734);">

修改弹窗文案

弹窗文案是整个整蛊页面最灵魂的部分

    <script>
        function fun1(){
            
            alert('不是吧！这你也信？'); 
            alert('那么，你相信光吗？'); 
            alert('其实世界上并没有奥特曼'); 
            alert('有的只是千万人心中不灭的信仰');
            alert('2023 希望你能相信光🌞');
            alert('这个世界正在变得更好');
            alert('我们要相信');
            alert('美好的未来终会来临');
			alert('山海云端论坛：www.shserve.cn');
            window.close();
        }
  </script>

可以看到有诸多的alert('文案');

您一行写一个文案，在界面中弹出一次展示一次

 alert('文案');

当然，建议少一些弹窗，否则热心网友可能会崩溃😊

最后祝大家整蛊快乐，2023年快乐！

版权声明 1 本网站名称：山海云端-专注于PHP与网络安全
2 本站永久网址：www.shserve.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1790643379进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END