2023新年红包，兔年HTML红包页面代码【2023新年快乐_附源码】

上进小菜猪 2023-03-28 原文

一.新年红包，兔年HTML红包页面

1.1 资源获取和效果预览

1.源码资源获取：

https://download.csdn.net/download/weixin_52908342/87373505

快速通道：点击跳转下载新年红包，兔年HTML红包页面源码

2.效果预览：

3.如何打开：（电脑端，解压后双击index.html打开！）

二.代码讲解（Html文件）

1.我们想要构成这么一个页面：我们可以先定义一个div盒子模型。

<div class="redpacket hvr-buzz-out">
</div>

这个div里面放俩个页面：

1.初始页面（未打开红包）。

2.打开红包页面。

2.初始页面（未打开红包）

我们下载好源码之后，可以使用任意编辑器，更改下文的文字：可以将上进小菜猪替换为你想要的文字。

<div class="content show">
                <div class="top">
                    <h2 class="title">上进小菜猪_新年好</h2>
                </div>

                <div class="bottom">
                    <div class="open">開</div>
                    <div class="line"></div>
                </div>
</div>

这里的open盒子调用了anime.min.js控制效果。

3.领取红包页面：

这里下面的文字也是可以自己更改为自己想要的效果：

        <div class="collect">
            <div class="collect_top">2023</div>
            <div class="collect_bottom">
                <h3 class="collect_title">上进小菜猪_祝你笑口常开</h3>
                <h2 class="price
                ">6.66 <span>元</span></h2>
                <div class="info"><a rel="nofollow" href="javascript:;">将「?笑口常开」设为状态 ></a></div>
            </div>
        </div>

4.网页版权部分，这里是结尾，只是注明作者，大家可以忽略这一部分。

<footer>
    <div class="copyright">&copy;copyright by <a rel="nofollow" href="#" target="_blank">上进小菜猪</a> <i
                                                                                       id="heartbeat" class="fa fas fa-heartbeat"></i>
        <span>2023</span>
    </div>
</footer>

5.JavaScript函数部分

这里之所以将JavaScript函数写到html页面，是因为用来检测用户点击行为，并且调用js文件来进行处理点击打开红包。

<script>
    let redPacket = document.querySelector('.redpacket');
    let open = document.querySelector('.open');
    let content = document.querySelector('.content');
    let collect = document.querySelector('.collect');


    open.onclick = function () {
        this.classList = 'open rotate';
        setTimeout(function () {
            content.classList = 'content';
            collect.classList = 'collect show';
            open.classList = 'open';
        }, 3000);
    }
</script>

6.引用的css文件

这里的css文件用于页面样式渲染。如果对前端较为熟练的朋友可以直接进行样式美化。

<link rel="stylesheet" href="./css/hover-min.css">
<link rel="stylesheet" href="./lib/fontawesome-free-6.0.0-web/css/all.min.css">
<link rel="stylesheet" href="./css/style.min.css">
<link rel="stylesheet" href="./css/heartbeat.min.css">

需要源码的，请看文章开头处的源码下载链接。

有疑问请进入交流群反馈。

三.Html文件代码展示（需要全部源码请到文章开头链接处下载）

<!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>上进小菜猪新年红包</title>
   <link rel="stylesheet" href="./css/hover-min.css">
    <link rel="stylesheet" href="./lib/fontawesome-free-6.0.0-web/css/all.min.css">
    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="stylesheet" href="./css/heartbeat.min.css">
</head>

<body>
    <div class="container">
        <!-- 红包盒子 -->
        <div class="redpacket hvr-buzz-out">
            <div class="content show">
                <div class="top">
                    <h2 class="title">上进小菜猪_新年好</h2>
                </div>

                <div class="bottom">
                    <div class="open">開</div>
                    <div class="line"></div>
                </div>
            </div>

            <!-- 领取红包页面 -->
            <div class="collect">
                <div class="collect_top">2023</div>
                <div class="collect_bottom">
                    <h3 class="collect_title">上进小菜猪_祝你笑口常开</h3>
                    <h2 class="price
                    ">6.66 <span>元</span></h2>
                    <div class="info"><a rel="nofollow" href="javascript:;">将「?笑口常开」设为状态 ></a></div>
                </div>
            </div>

        </div>
    </div>
    <footer>
        <div class="copyright">&copy;copyright by <a rel="nofollow" href="#" target="_blank">上进小菜猪</a> <i
                id="heartbeat" class="fa fas fa-heartbeat"></i>
            <span>2023</span>
        </div>
    </footer>
</body>
<script src="./js/anime.min.js"></script>
<script>
    let redPacket = document.querySelector('.redpacket');
    let open = document.querySelector('.open');
    let content = document.querySelector('.content');
    let collect = document.querySelector('.collect');


    open.onclick = function () {
        this.classList = 'open rotate';
        setTimeout(function () {
            content.classList = 'content';
            collect.classList = 'collect show';
            open.classList = 'open';
        }, 3000);
    }
</script>

</html>

兔年新年 quot gt lt html css .netJavaScript 前端开发私藏项目实操分享

有关2023新年红包，兔年HTML红包页面代码【2023新年快乐_附源码】的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2
在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - 浏览 Ruby 源代码 - 2
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
ruby - 模块嵌套代码风格偏好 - 2
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。最佳答案这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的
ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2
几个月前，我读了一篇关于rubygem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？最佳答案是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby - Net::HTTP 获取源代码和状态 - 2
我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。最佳答案在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur