目录

前言

一、贺卡展示:

二、完整代码


前言

圣诞节快到啦,之前跟大家分享了圣诞树代码。
今天就跟大家带来圣诞贺卡的代码,直接运行也很方便的,赶快来拿发给你最后的朋友吧!


一、贺卡展示:

这个就是贺卡的动画界面啦,还有雪花飘落是不是特别漂亮呀!
可以发给身边的朋友,预祝大家圣诞节快乐哦!

二、完整代码

这个就是完整的代码,大家一定要注意格式哈~

整个代码不到200行,大家也可以自己尝试写一下哦,还可以当作一次小练习!


<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣诞节快乐 BY Python代码</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <!--[if IE]>
        <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <![endif]-->
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/shake.js"></script>
  </head>
  <body>
    <div class="container">
      <h1><span>Python代码大全</span></h1>
      <canvas id="snowfall"></canvas>
      <div id="merrywrap" class="merrywrap">
        <div class="giftbox">
          <div class="cover">
            <div></div>
          </div>
          <div class="box"></div>
        </div>
        <div class="icons">
          <div class="row">
           
            <span class="letter">C</span>
            <span class="letter">h</span>
            <span class="letter">r</span>
            <span class="letter">i</span>
            <span class="letter">s</span>
            <span class="letter">t</span>
            <span class="letter">m</span>
            <span class="letter">a</span>
            <span class="letter">s</span>
           
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 50">
                <circle cx="14.31" cy="19.969" r="0.88"/>
                <circle cx="16.07" cy="18.209" r="0.88"/>
                <circle cx="17.831" cy="16.448" r="0.88"/>
                <circle cx="19.592" cy="14.687" r="0.88"/>
                <circle cx="16.574" cy="21.73" r="0.88"/>
                <circle cx="18.334" cy="19.969" r="0.88"/>
                <circle cx="20.095" cy="18.209" r="0.88"/>
                <circle cx="21.856" cy="16.448" r="0.88"/>
                <circle cx="23.617" cy="14.687" r="0.88"/>
                <circle cx="35.69" cy="19.969" r="0.88"/>
                <circle cx="33.93" cy="18.208" r="0.88"/>
                <circle cx="32.169" cy="16.448" r="0.88"/>
                <circle cx="30.408" cy="14.687" r="0.88"/>
                <circle cx="33.426" cy="21.73" r="0.88"/>
                <circle cx="31.666" cy="19.97" r="0.88"/>
                <circle cx="29.905" cy="18.208" r="0.88"/>
                <circle cx="28.144" cy="16.448" r="0.88"/>
                <circle cx="26.383" cy="14.687" r="0.88"/>
                
        </div>
        <div class="background">
         
        </div>
      </div>
            <div class="redPacketInfo">
                <div class="redPacketBox">
                    <p>恭喜你</p>
                    <p>获得了一个红包</p>
                    <p>复制以下密令</p>
                    <p>到支付宝领取红包吧</p>
                    <p id="pwd">唐松的圣诞节红包</p>
                    <button class="copyBtn copy">点击复制</button>
          <div class="close">
            <a href="#"><img src="http://ogovuaov8.bkt.clouddn.com/guanbi.png"/></a>
          </div>
                </div>
            </div>
            <div class="copyRight">
                <p>复制成功</p>
                <p>快去支付宝领取红包吧!</p>
            </div>
    </div>
    <!-- /container -->
    <script src="js/rectangleEmitter.js"></script>
    <script src="js/snow.js"></script>
    <script src="js/classie.js"></script>
    <script src="js/main.js"></script>
  <script>
        var clipboard = new Clipboard('.copyBtn', {
            text: function() {
                return $("#pwd").text();
            }
        });

        clipboard.on('success',
            function(e) {
                $(".redPacketInfo").fadeOut();
                $(".redPacketBox").removeClass("comeup");
                $(".close").removeClass("showup");
                $(".copyRight").fadeIn().delay(3000).fadeOut();
            });
        clipboard.on('error',
            function(e) {
                console.log(e);
                alert("对不起,您的微信不支持该功能,请手动长按复制");
            });

        //摇一摇
        $(function() {
            var Main = (function() {
                function playAudio(src) {
                    if(typeof Audio != "undefined") {
                        new Audio(src).play();
                    } else if(typeof device != "undefined") {
                        if(device.platform == 'Android') {
                            console.log(src);
                        }
                        var mediaRes = new Media(src,
                            function onSuccess() {
                                mediaRes.release();
                            },
                            function onError(e) {
                                console.log("error playing sound: " + JSON.stringify(e));
                            });
                        mediaRes.play();

                    } else {
                        alert("no sound API to play: " + src);
                    }
                }
                window.addEventListener('shake', autoRun, false);

                function autoRun() {
                    playAudio("http://ogovuaov8.bkt.clouddn.com/luckymoney.mp3");
                    $(".redPacketInfo").fadeIn();
                    $(".redPacketBox").addClass("comeup");
                    $(".close").addClass("showup");

                    $(".close").one("click", function() {
                        $(".redPacketInfo").hide();
                        $(".redPacketBox").removeClass("comeup");
                        $(".close").removeClass("showup");
                    });

                    window.addEventListener('shake', function (event) {
                        event.preventDefault()}, false);

                    e.stopPropagation();

                    $(".redPacketBox").on("click", function(e) {
                        e.stopPropagation();
                    });
                }
                var init = function() {

                }
                return {
                    init: init
                }
            })();

            $(Main.init());
        });
</script>
  </body>
</html>


Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐