目录
前言
圣诞节快到啦，之前跟大家分享了圣诞树代码。
今天就跟大家带来圣诞贺卡的代码，直接运行也很方便的，赶快来拿发给你最后的朋友吧！
一、贺卡展示：
这个就是贺卡的动画界面啦，还有雪花飘落是不是特别漂亮呀！
可以发给身边的朋友，预祝大家圣诞节快乐哦！
二、完整代码
这个就是完整的代码，大家一定要注意格式哈~
整个代码不到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>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
已为社区贡献2条内容
