圣诞老人-jq-html

动态圣诞老人头像

先上原图

代码分为三部分：

1.基本结构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CodePen - Merry Christmas</title></head>
<body><div class="sky"></div><div class="message"><h1 class="ho1">HO!</h1><h1 class="ho2">HO!</h1><h1 class="ho3">HO!</h1></div><div class="face"><div class="hair"></div><div class="cap"></div><div class="captop"></div><div class="eyes"></div><div class="nose"></div><div class="mouth"></div><div class="mustache"></div><div class="beard"></div></div><div class="big-Message"><span>Merry Christmas!</span>This Christmas :)<br>Wishing You &amp; Your Family <br>Lots of Love, Prosperity &amp; Happiness<br><a href="http://jmonit.com" target="_blank" style="color:gold"></a></div></body></html>

2.css样式

 <style>@import url(https://fonts.googleapis.com/css?family=Caveat+Brush);body {background: #0F8A5F;margin-top: 300px;}.audio-player {background: rgba(0, 0, 0, .5);padding: 1em;width: 300px;height: 32px;position: absolute;top: 50%;left: 0;transition: all .5s ease;}#audplayer {z-index: 300;position: absolute;}.audio-player:after,.trig {content: "*";display: block;position: absolute;width: 64px;height: 64px;background: rgba(0, 0, 0, .5);top: 0;right: -65px;text-align: center;color: white;font-size: 4em;font-weight: bold;line-height: 85px;z-index: 200;cursor: pointer;}.trig {background: transparent;z-index: 500;}.big-Message {width: 600px;text-align: center;color: #fff;font-size: 3em;font-family: 'Caveat Brush', cursive;position: absolute;top: 220px;left: 50%;margin-left: -400px;background: rgba(0, 0, 0, .7);border-radius: 100%;padding: 4em 2em;z-index: 400;opacity: 0;transition: opacity 1s ease;}.big-Message:hover {opacity: 1;}.big-Message span {display: block;font-size: 1.75em;}.hide {left: -330px;}.message {position: relative;width: 700px;margin: auto;height: 100px;}h1 {font-family: 'Caveat Brush', cursive;font-size: 0;color: #fff;position: absolute;margin: 0;top: 0;}.ho1 {transform: rotate(-15deg);-webkit-animation: ho 5s infinite;animation: ho 5s infinite;}.ho3 {right: 0;transform: rotate(15deg);-webkit-animation: ho 5s infinite;animation: ho 5s infinite;-webkit-animation-delay: 2s;animation-delay: 2s;}.ho2 {left: 35%;-webkit-animation: ho2 5s infinite;animation: ho2 5s infinite;-webkit-animation-delay: 1s;animation-delay: 1s;}.face {width: 350px;height: 350px;border-radius: 100%;background: #FFD6BF;margin: auto;position: relative;}.hair {width: 500px;height: 400px;background: white;position: absolute;top: -10px;left: -75px;border-radius: 100%;z-index: -1;-webkit-animation: hair 1s infinite;animation: hair 1s infinite;}.cap {width: 0%;height: 0%;border-radius: 100%;background: #CC231E;border: 210px solid #CC231E;border-bottom: 0;position: absolute;top: -130px;left: -35px;box-shadow: 0 0 10px rgba(0, 0, 0, .5);-webkit-animation: cap 1s infinite;animation: cap 1s infinite;}.cap:before {width: 0;height: 0;position: absolute;display: block;content: "";border: 70px solid #CC231E;border-top-color: transparent;border-right-color: transparent;left: 162px;top: -130px;transform: rotate(20deg);z-index: -1;-webkit-animation: caprotate 1s infinite;animation: caprotate 1s infinite;}.cap:after {width: 70px;height: 70px;position: absolute;display: block;content: "";background: white;border-radius: 100%;left: 250px;-webkit-animation: capball 1s infinite;animation: capball 1s infinite;box-shadow: 0 0 5px rgba(0, 0, 0, .5);}.captop {width: 130%;height: 70px;border-radius: 30px;background: white;position: absolute;left: -50px;top: 30px;box-shadow: 0 0 5px rgba(0, 0, 0, .5);-webkit-animation: captop 1s infinite;animation: captop 1s infinite;}.mouth {width: 100px;height: 70px;border-radius: 100%;background: maroon;position: absolute;top: 220px;left: 125px;z-index: 70;-webkit-animation: mouth .75s infinite;animation: mouth .75s infinite;}.mouth:after,.mouth:before {content: "";display: block;position: absolute;background: white;width: 120%;height: 100%;border-radius: 0 100%;top: -20px;left: -20px;transform: rotate(-10deg);}.mouth:before {display: none;}.beard:before,.beard:after {content: "";width: 70%;height: 60%;background: white;display: block;border-radius: 100%;position: absolute;}.beard:before {left: -40px;top: 30px;}.beard:after {right: -40px;top: 30px;}.eyes {position: absolute;width: 150px;height: 30px;left: 100px;top: 120px;-webkit-animation: blink 2s infinite;animation: blink 2s infinite;}.eyes:before,.eyes:after {content: "";height: 100%;width: 30px;background: black;display: block;position: absolute;border-radius: 100%;}.eyes:after {right: 0px;}.nose {width: 70px;height: 50px;border-radius: 100%;background: #CC231E;position: absolute;left: 140px;top: 170px;z-index: 100;-webkit-animation: nose .75s infinite;animation: nose .75s infinite;}.mustache {position: absolute;width: 300px;height: 100px;left: 25px;top: 180px;}.mustache:before,.mustache:after {content: "";width: 50%;height: 100%;background: white;display: block;border-radius: 100% 0;position: absolute;box-shadow: 0 0 5px rgba(0, 0, 0, .5);z-index: 80;}.mustache:after {right: 0;border-radius: 0 100%;}.mustache {-webkit-animation: pulse .75s infinite;animation: pulse .75s infinite;}.beard {width: 400px;height: 400px;background: white;position: absolute;top: 180px;left: -25px;border-radius: 100%;-webkit-animation: beard .75s infinite;animation: beard .75s infinite;}.beard:before,.beard:after {content: "";width: 70%;height: 60%;background: white;display: block;border-radius: 100%;position: absolute;}.beard:before {left: -40px;top: 30px;}.beard:after {right: -40px;top: 30px;}@-webkit-keyframes nose {0% {top: 170px;}50% {top: 160px;}100% {top: 170px;}}@keyframes nose {0% {top: 170px;}50% {top: 160px;}100% {top: 170px;}}@-webkit-keyframes pulse {0% {height: 100px;top: 180px;}50% {height: 90px;top: 170px;}100% {height: 100px;top: 180px;}}@keyframes pulse {0% {height: 100px;top: 180px;}50% {height: 90px;top: 170px;}100% {height: 100px;top: 180px;}}@-webkit-keyframes beard {0% {height: 400px;top: 180px;}50% {height: 390px;top: 170px;}100% {height: 400px;top: 180px;}}@keyframes beard {0% {height: 400px;top: 180px;}50% {height: 390px;top: 170px;}100% {height: 400px;top: 180px;}}@-webkit-keyframes blink {0% {height: 30px;top: 120px;}5% {height: 0;top: 140px;}10% {height: 30px;top: 120px;}100% {height: 30px;top: 120px;}}@keyframes blink {0% {height: 30px;top: 120px;}5% {height: 0;top: 140px;}10% {height: 30px;top: 120px;}100% {height: 30px;top: 120px;}}@-webkit-keyframes mouth {0% {top: 220px;}50% {top: 200px;}100% {top: 220px;}}@keyframes mouth {0% {top: 220px;}50% {top: 200px;}100% {top: 220px;}}@-webkit-keyframes mouthlip {0% {height: 100%;top: -20px;left: -20px;}20% {height: 50%;width: 50%;top: -50px;left: -40px;}30% {height: 100%;top: -20px;left: -20px;}}@keyframes mouthlip {0% {height: 100%;top: -20px;left: -20px;}20% {height: 50%;width: 50%;top: -50px;left: -40px;}30% {height: 100%;top: -20px;left: -20px;}}@-webkit-keyframes caprotate {0% {transform: rotate(20deg);}50% {transform: rotate(25deg);left: 160px;top: -120px;}100% {transform: rotate(20deg);}}@keyframes caprotate {0% {transform: rotate(20deg);}50% {transform: rotate(25deg);left: 160px;top: -120px;}100% {transform: rotate(20deg);}}@-webkit-keyframes capball {0% {}50% {left: 220px;top: -10px;}100% {}}@keyframes capball {0% {}50% {left: 220px;top: -10px;}100% {}}@-webkit-keyframes cap {0% {}50% {top: -110px;}100% {}}@keyframes cap {0% {}50% {top: -110px;}100% {}}@-webkit-keyframes captop {0% {}50% {top: 40px;height: 65px;}100% {}}@keyframes captop {0% {}50% {top: 40px;height: 65px;}100% {}}@-webkit-keyframes hair {0% {}50% {width: 490px;left: -70px;}100% {}}@keyframes hair {0% {}50% {width: 490px;left: -70px;}100% {}}@-webkit-keyframes ho {0% {font-size: 0;opacity: 0;top: 0;}50% {font-size: 10em;opacity: 1;top: -200px;}90% {font-size: 10em;opacity: 1;top: -200px;}100% {font-size: 0;opacity: 0;}}@keyframes ho {0% {font-size: 0;opacity: 0;top: 0;}50% {font-size: 10em;opacity: 1;top: -200px;}90% {font-size: 10em;opacity: 1;top: -200px;}100% {font-size: 0;opacity: 0;}}@-webkit-keyframes ho2 {0% {font-size: 0;opacity: 0;top: 0;}50% {font-size: 10em;opacity: 1;top: -250px;}90% {font-size: 10em;opacity: 1;top: -250px;}100% {font-size: 0;opacity: 0;}}@keyframes ho2 {0% {font-size: 0;opacity: 0;top: 0;}50% {font-size: 10em;opacity: 1;top: -250px;}90% {font-size: 10em;opacity: 1;top: -250px;}100% {font-size: 0;opacity: 0;}}.sky {height: 100vw;color: #FFF;display: block;position: absolute;width: 100%;top: 0;left: 0;}</style>

3.js

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script>// Snow from https://codepen.io/radum/pen/xICABvar aud = document.getElementById("audplayer");aud.volume = 0.2;$(".trig").click(function () {$(".audio-player").toggleClass("hide");});(function () {var COUNT = 400;var masthead = document.querySelector('.sky');var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');var width = masthead.clientWidth;var height = masthead.clientHeight;var i = 0;var active = false;function onResize() {width = masthead.clientWidth;height = masthead.clientHeight;canvas.width = width;canvas.height = height;ctx.fillStyle = '#FFF';var wasActive = active;active = width > 600;if (!wasActive && active)requestAnimFrame(update);}var Snowflake = function () {this.x = 0;this.y = 0;this.vy = 0;this.vx = 0;this.r = 0;this.reset();}Snowflake.prototype.reset = function () {this.x = Math.random() * width;this.y = Math.random() * -height;this.vy = 1 + Math.random() * 3;this.vx = 0.5 - Math.random();this.r = 1 + Math.random() * 2;this.o = 0.5 + Math.random() * 0.5;}canvas.style.position = 'absolute';canvas.style.left = canvas.style.top = '0';var snowflakes = [], snowflake;for (i = 0; i < COUNT; i++) {snowflake = new Snowflake();snowflake.reset();snowflakes.push(snowflake);}function update() {ctx.clearRect(0, 0, width, height);if (!active)return;for (i = 0; i < COUNT; i++) {snowflake = snowflakes[i];snowflake.y += snowflake.vy;snowflake.x += snowflake.vx;ctx.globalAlpha = snowflake.o;ctx.beginPath();ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);ctx.closePath();ctx.fill();if (snowflake.y > height) {snowflake.reset();}}requestAnimFrame(update);}// shim layer with setTimeout fallbackwindow.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000 / 60);};})();onResize();window.addEventListener('resize', onResize, false);masthead.appendChild(canvas);})();</script>

圣诞老人-jq-html相关推荐

python安装依赖失败_python - pip安装jq依赖关系失败 - SO中文参考 - www.soinside.com
这是我在stackoverflow上的第一个问题.我成功地安装了其他需要的包,如箭头,但我无法安装.jq. https:/pypi.orgprojectjq. 我尝试安装 jq 在Win10上使用此命 ...
在3ds Max和Vray中创建赛博朋克圣诞老人室内场景
我叫奥马尔·萨米·罗什迪,建筑师.室内设计师.助理讲师.摄影师和3d艺术家.2019年获得建筑学硕士学位.我曾为多家建筑事务所和顾问工作,甚至建立了自己的建筑工作室.我有很长的大学教学生涯,从2013 ...
JQ+ajax 提交表单不跳转页面
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 代码 <div class="apply_box"><h1>合作申 ...
代码简介：向圣诞老人和他的精灵学习Google Analytics（分析）
Here are three stories we published this week that are worth your time: 这是我们本周发布的三个值得您关注的故事: Learn G ...
jq父级绑定事件的意义_jq——事件
$(document),$(body) 加载事件: $(document).ready(fn) $(document).ready(function(){ alert("这是加载事件&quo ...
javascript和jq的事件委托
2019独角兽企业重金招聘Python工程师标准>>> 今天在公司,有个需求是,通过ajax动态查询数据,回来,再添加到一个ul的li元素中,例如(点击生成 li 模拟,加载数据生成 ...
JS与JQ的对比与提高
来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
JQ~trigger与bind，触发与绑定何先何后？
最近在做项目时,遇到一个需求,事实上就是表单联动的问题,单击单选框,下面的复选框联动,当第一次加载时,默认触发第一个单选框,如图: 之前的方法,没有完成我的要求,第一次加载时,公司被选中,再" ...
jq 创建与添加节点
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了...
写在前面说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到 ...

圣诞老人-jq-html

动态圣诞老人头像

代码分为三部分：

圣诞老人-jq-html相关推荐

最新文章

热门文章