圣诞老人
动态圣诞老人头像
先上原图
代码分为三部分：
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 & Your Family <br>Lots of Love, Prosperity & Happiness<br><a href="" target="_blank" style="color:gold"></a></div></body></html>
2.css样式
<style>@import url(=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='.1.3/jquery.min.js'></script><script>// Snow from 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>
圣诞老人
动态圣诞老人头像
先上原图
代码分为三部分：
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 & Your Family <br>Lots of Love, Prosperity & Happiness<br><a href="" target="_blank" style="color:gold"></a></div></body></html>
2.css样式
<style>@import url(=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='.1.3/jquery.min.js'></script><script>// Snow from 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>