圣诞节马上到了。H5+CSS3+JS制作圣诞帽头像源码送给你们。。。

先给大家看下页面效果: 一键圣诞帽

------这张图片源码到手后大家可以随便换的！！！

废话不多说，直接上源码：

这里是部分代码！！！


<!DOCTYPE html>
<html>
<head><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一键圣诞帽</title><meta name="description" itemprop="description" content="我刚更新了圣诞头像，你们也来试试吧！" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><link rel="stylesheet" type="text/css" href="static/global.css" /><link rel="stylesheet" type="text/css" href="static/main.css" />
</head>
<body>
<img id="defaultImg" class="invisible" src="static/home-default.png" />
<input id="uploadInput" class="invisible" type="file" accept="image/*" />
<div id="wrapperOuter" class="wrapper-outer"><div id="welcomeSection" class="wrapper-inner welcome-section" style="background-image:url(static/home-bg.png);display:none;"><img class="title" src="static/home-title.png" /><img class="default" src="static/home-default.png" /><img class="choose-btn" src="static/home-choose-btn.png" /></div><div id="resultSection" class="wrapper-inner result-section" style="background-image:url(static/home-bg.png);display:none;"><img class="title" src="static/home-title.png" /><img id="resultImg" class="photo" /><img class="choose-btn" src="static/home-choose-btn.png" /><img class="choose-btn" style="cursor:default;width:24%;bottom:1%;left:37%;" src="static/pitu_logo.png" /></div><div id="cropSection" class="wrapper-inner crop-section" style="display:none;"><div id="cropLayer" class="crop-layer"><canvas id="cropCanvas" width="420" height="420"></canvas><img id="cropImg" style="display:none;" /><div class="background">&nbsp;</div></div><div id="cropMaskUp" class="crop-mask" style="visibility:hidden;">&nbsp;</div><div id="cropMaskDown" class="crop-mask" style="visibility:hidden;">&nbsp;</div><div id="cropBar" class="crop-bar"><div class="choose-btn">重新选图</div><div class="next-btn">下一步</div></div></div><div id="hatSection" class="wrapper-inner hat-section" style="display:none;"><div id="hatLayer" class="hat-layer"><img id="hatFace" /><div class="background">&nbsp;</div><div id="hatStamp" class="hat-stamp-on" style="left:0;top:0;" scale="1.0" rotation="0"><img class="hat-icon" src="static/icon-hat.png" /><div class="background">&nbsp;</div><div class="hat-anchor-ld" anchor="1" style="background-image:url(static/icon-anchor.png);">&nbsp;</div><div class="hat-anchor-rd" anchor="1" style="background-image:url(static/icon-anchor.png);">&nbsp;</div></div></div><div id="hatMaskUp" class="hat-mask" style="visibility:hidden;">&nbsp;</div><div id="hatMaskDown" class="hat-mask" style="visibility:hidden;">&nbsp;</div><div id="hatBar" class="hat-bar"><div class="move-tips">移动圣诞帽到恰当位置</div><div class="confirm-btn">确定</div></div></div><div id="saveSection" class="wrapper-inner save-section" style="background-image:url(static/home-bg.png);display:none;"><div class="share-img"><img id="shareImg" /><div class="save-tips">长按可保存头像</div><div class="qzcache-tips" style="display:none;">QQ空间头像若未显示，清除缓存后再试</div></div><div class="retry-btn">再定制一张</div></div><div id="loadingSection" class="wrapper-inner loading-section"><div class="body"><p>loading...</p><img class="animate" src="" style="display: none" /><p></p><div style="display:none;">关闭</div></div></div><div id="shareSection" class="wrapper-inner share-section" style="display:none;"><div class="background">&nbsp;</div><img src="static/share-guide.png" /></div><div id="qrcodeSection" class="wrapper-inner qrcode-section" style="display:none;"><div class="background">&nbsp;</div><div class="body"><img id="qrcodeImg" /><p>请使用手机扫码体验</p></div></div>
</div>
<!-- <div class="weixin">感兴趣的朋友可以加下方微信：</br><span style="color:cyan;">  woshishichunyuya</span>
</div> -->
<div style="
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 40px;
z-index: 99999999999;
"><a href="../index.html"><img style="width:100%" src="../index/images/toindex.png" alt=""></a></div>
<div style=
"color: rgba(255, 255, 255, 0.5);
font-size: 0.9em;
margin: 0 0 2em 0;
padding: 0;
text-align: center;
position: fixed;
width: 100%;
margin: 0 auto;
bottom: 0;
z-index: 9999999999;">Copyright &copy; 2019.Shichunyu All rights reserved.</div>
<script src="static/html2canvas.min.js"></script>
<script type="text/javascript">function loadScript(filepath, onloadCallback) {var scriptDom = document.createElement("script");scriptDom.onload = scriptDom.onreadystatechange = onloadCallback;scriptDom.type = "text/javascript";scriptDom.src = filepath;document.body.appendChild(scriptDom);}var zeptoScriptLoaded = false;var extScriptLoaded = false;var globalScriptLoaded = false;var mainScriptLoaded = false;var scriptAllLoaded = false;function scriptLoadFinish() {if (!scriptAllLoaded && zeptoScriptLoaded && extScriptLoaded && globalScriptLoaded && mainScriptLoaded) {scriptAllLoaded = true;window.setTimeout(function(){pageReady(indexPageReady, indexPageResize);}, 0);}}loadScript("static/zepto-1.1.4.js", function(){if (!zeptoScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {zeptoScriptLoaded = true;window.setTimeout(scriptLoadFinish, 0);}});loadScript("static/ext-1.0.1.js", function(){if (!extScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {extScriptLoaded = true;window.setTimeout(scriptLoadFinish, 0);}});loadScript("static/global.js", function(){if (!globalScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {globalScriptLoaded = true;window.setTimeout(scriptLoadFinish, 0);}});loadScript("static/main.js", function(){if (!mainScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {mainScriptLoaded = true;window.setTimeout(scriptLoadFinish, 0);}});
</script>
</body>
</html>

核心代码以及全部文件夹可以这这里下载：制作圣诞帽源码！！！_海龟编辑器源码-互联网文档类资源-CSDN下载

没有积分的同学可以关注我，然后私信我给你发。

圣诞节马上到了。H5+CSS3+JS制作圣诞帽头像源码送给你们。。。相关推荐

html图片做一个转盘,H5+CSS3+JS制作抽奖转盘
/p> 抽奖转盘 src="http://ajax.aspnetcdn.com/ajax/ > #wrap { height: 100%; width: 500px; posit ...
登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
本文实例为大家分享了H5+css3+js搭建带验证码的登录页面,供大家参考,具体内容如下 login.html EasyBuy后台管理系统 .main_bar{ width:1350px; heigh ...
登录页面带验证码html,使用H5+css3+js实现带验证码的登录页面
使用H5+css3+js实现带验证码的登录页面发布时间:2020-10-28 19:51:18 来源:亿速云阅读:151 作者:Leah 本篇文章为大家展示了使用H5+css3+js实现带验证码的 ...
JavaScript实现“打地鼠”游戏开发（3）——锤子的显示及游戏音效的添加（基于H5+CSS3+JS+jQuery实现）
说明: 上一节我们实现了打地鼠游戏的主体功能,包括:老鼠的随机出现.击中目标后分数增加,倒计时为0时游戏结束等功能.接下来我们将对游戏音效的添加.锤子效果的实现进行具体实现. 这是前两节的地址链接: ...
python电玩城源码_2019最新最全价值2W的微信H5电玩城游戏全套源码+架设教程+配置文档...
2019最新最全价值2W的微信H5电玩城游戏全套源码+架设教程+配置文档由小鱼H5游戏源码精心整理,并分享给大家.喜欢该资源的小伙伴请下载使用,注册.回复.每日签到.点赞送大量积分,满足您免费下载的愿 ...
html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
安卓Android与H5双向交互MathJax展示数学公式(源码+解析)
安卓Android与H5双向交互MathJax展示数学公式(源码+解析) 博主就今天周五又做了个需求(安卓Android与H5交互),原来上线的功能是服务器配置过来的学习报告(一个H5页面)并提供原始 ...
姓氏头像框一键制作小程序源码
正文: 姓氏头像框一键制作小程序源码+附微语模块,源码无需后端服务器搭建,源码搭建也非常简单,包含了多种模板制作,且风格多样化,例如有热度比较高的姓氏头像. 虽然该主题是以姓氏框制作为主的,但是姓氏主 ...
虎年降至.一款2022虎年为主的一款头像制作小程序源码。
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...
css3 烟蚊香_HTML5前端特效库 css3 按钮粒子烟花特效源码
效果图各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 需要文档版本源码,可以加我的HTML5前端交流群111645711 好了,废话不多 ...

圣诞节马上到了。H5+CSS3+JS制作圣诞帽头像源码送给你们。。。

先给大家看下页面效果: 一键圣诞帽

废话不多说，直接上源码：

圣诞节马上到了。H5+CSS3+JS制作圣诞帽头像源码送给你们。。。相关推荐

最新文章

热门文章