圣诞节马上就要到了,不知道给自己喜欢的人准备什么样的惊喜吗?作为一名程序员,当然是用编程制作专属于她or他的圣诞树!
目录
🎄圣诞树
✨3D圣诞树
代码块
打开方式
修改位置
效果展示
✨音乐律动圣诞树
代码块
打开方式
效果展示
✨灯光圣诞树
代码块
修改位置
效果展示
🎁圣诞贺卡
🎊祝福绘制圣诞贺卡
代码块
修改位置
效果展示
🎊雪橇雪人圣诞贺卡
代码块
效果展示
🎊祝福语圣诞贺卡
代码块
修改位置
效果展示
🧧源码获取方式
一年一度的圣诞节马上就要到了,看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享多种不同风格的圣诞树和圣诞贺卡,附上完整代码,拿来即用可以按照自己的喜好来去运行使用哦。
🎄圣诞树
✨3D圣诞树
代码块
打开方式
新建文本文档----→将代码粘贴后保存----→将文件后缀改为html打开即可
注意事项:用记事本输入代码,然后更改格式为html,有些人的电脑会默认隐藏文件格式,这时候你要在此电脑的查看选项中,把已知文件类型的扩展名这个选项的✓给打开,这样就会显示你每个文件的具体格式了。
修改位置
//修改引号内的内容 ('Happy Christmas!',U,345); //例如: ('猪猪圣诞快乐!',U,345); 源代码中已标注
效果展示
✨音乐律动圣诞树
代码块
- 请选择音乐
- 或者
打开方式
新建文本文档----→将代码粘贴后保存----→将文件后缀改为html打开即可
注意事项:用记事本输入代码,然后更改格式为html,有些人的电脑会默认隐藏文件格式,这时候你要在此电脑的查看选项中,把已知文件类型的扩展名这个选项的✓给打开,这样就会显示你每个文件的具体格式了。
效果展示
✨灯光圣诞树
代码块
html
猪猪 ♥ 圣诞快乐 猪猪 ♥ 圣诞快乐 修改文字部分即可
CSS
*{ margin: 0; padding:0; } body{ height:100vh; display:flex; justify-content:center; align-items: center; background-color: #233343; overflow:hidden; transform-style: preserve-3d; perspective: 1200px; } .tree{ /* border:1px solid red; */ width:1200px; height: 716px; position:relative; transform-style: preserve-3d; animation:spin 1s linear infinite } .tree-light{ transform-style: preserve-3d; position:absolute; width: 8px; height:8px; border-radius:50%; left:50%; bottom:calc(var(--y)*1%); transform: translate(-50%,50%) rotateY(calc(var(--rotate,0)*1deg)) translate3d(0,0,calc(var(--radius,0)*25px)); animation: flash calc(var(--speed) * 0.5s) calc(var(--delay)*0.5s) infinite, appear 0.5s calc(var(--appear)*0.05s); } .tree-star{ stroke:#f5e0a3; stroke-dasharray: 1000 1000; width: 50px; height: 50px; filter:drop-shadow(0 0 10px #fcf1cf); position: absolute; left:50%; bottom:100%; transform: translate(-50%,0); animation: stroke 1s calc((var(--delay)*0.95)*0.02s) backwards; } .wish{ stroke:#f5e0a3; stroke-dasharray: 1000 1000; position:absolute; left:50%; transform: translate(-20%,20%); width:1000px; height:300px; justify-content:center; align-items: center; color:#faebd7; font-size: 50px; } @keyframes appear { from{ opacity:0; } } @keyframes flash { 0%,100%{ background-color:#4f60f6; } 20%{ background-color: #f64f4f; } 40%{ background: #4fecf6; } 60%{ background-color: #f6db4f; } 80%{ background-color: #f64fe5; } } @keyframes spin { to{ transform: rotateY(360deg); } } @keyframes stroke{ from{ stroke-dashoffset: -1000; } }
修改位置
猪猪 ♥ 圣诞快乐 修改文字部分即可 源代码中已标注
效果展示
🎁圣诞贺卡
🎊祝福绘制圣诞贺卡
代码块
HTML
CodePen - Merry Christmas ❤ 猪猪圣诞快乐
JS
$('text').each(function () { const el = $(this); const text = el.html().split(''); el.html(`${text.join(' ')} `); });
CSS
@import url(https://fonts.googleapis.com/css?family=Calligraffitti); @-webkit-keyframes s { 0% { stroke-dasharray: 0 300; } 100% { stroke-dasharray: 300 0; } } @keyframes s { 0% { stroke-dasharray: 0 300; } 100% { stroke-dasharray: 300 0; } } @-webkit-keyframes f { 0% { transform: translateY(-40px); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 0.1; } 100% { transform: translateY(50vh); opacity: 0; } } @keyframes f { 0% { transform: translateY(-40px); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 0.1; } 100% { transform: translateY(50vh); opacity: 0; } } html { height: 100%; } body { background: #a32300; font-family: "Calligraffitti"; height: 100%; text-align: center; } svg { margin-top: calc(50vh - 75px); width: 300px; } .Merry, .Christmas { fill: none; stroke: #fff; text-shadow: 0 0 14px #a32300; stroke-width: 4; stroke-dasharray: 0 100; text-anchor: middle; } .Merry { font-size: 44px; } .Merry tspan:nth-child(1) { -webkit-animation: s 2s 1s linear forwards; animation: s 2s 1s linear forwards; } .Merry tspan:nth-child(2) { -webkit-animation: s 2s 2s linear forwards; animation: s 2s 2s linear forwards; } .Merry tspan:nth-child(3) { -webkit-animation: s 2s 3s linear forwards; animation: s 2s 3s linear forwards; } .Merry tspan:nth-child(4) { -webkit-animation: s 2s 4s linear forwards; animation: s 2s 4s linear forwards; } .Merry tspan:nth-child(5) { -webkit-animation: s 2s 5s linear forwards; animation: s 2s 5s linear forwards; } .Christmas { font-size: 64px; stroke-width: 6; } .Christmas tspan:nth-child(1) { -webkit-animation: s 2s 6s linear forwards; animation: s 2s 6s linear forwards; } .Christmas tspan:nth-child(2) { -webkit-animation: s 2s 7s linear forwards; animation: s 2s 7s linear forwards; } .Christmas tspan:nth-child(3) { -webkit-animation: s 2s 8s linear forwards; animation: s 2s 8s linear forwards; } .Christmas tspan:nth-child(4) { -webkit-animation: s 2s 9s linear forwards; animation: s 2s 9s linear forwards; } .Christmas tspan:nth-child(5) { -webkit-animation: s 2s 10s linear forwards; animation: s 2s 10s linear forwards; } .Christmas tspan:nth-child(6) { -webkit-animation: s 2s 11s linear forwards; animation: s 2s 11s linear forwards; } .Christmas tspan:nth-child(7) { -webkit-animation: s 2s 12s linear forwards; animation: s 2s 12s linear forwards; } .Christmas tspan:nth-child(8) { -webkit-animation: s 2s 13s linear forwards; animation: s 2s 13s linear forwards; } .Christmas tspan:nth-child(9) { -webkit-animation: s 2s 14s linear forwards; animation: s 2s 14s linear forwards; } .Snow { position: absolute; filter: blur(1px); top: 0; left: 0; width: 100%; font-size: 0; height: 100%; overflow: hidden; } .Snow-flake { -webkit-animation: f 4s linear infinite; animation: f 4s linear infinite; display: inline-block; border-radius: 50%; background: #fff; margin: 0 10px 0; width: 10px; height: 10px; transform: translateY(-40px); opacity: 0.5; } .Snow-flake:nth-child(1) { -webkit-animation-delay: -3.6793681361s; animation-delay: -3.6793681361s; } .Snow-flake:nth-child(2) { -webkit-animation-delay: -0.4661163393s; animation-delay: -0.4661163393s; } .Snow-flake:nth-child(3) { -webkit-animation-delay: -3.4905253225s; animation-delay: -3.4905253225s; } .Snow-flake:nth-child(4) { -webkit-animation-delay: -2.7553831417s; animation-delay: -2.7553831417s; } .Snow-flake:nth-child(5) { -webkit-animation-delay: -0.7750134007s; animation-delay: -0.7750134007s; } .Snow-flake:nth-child(6) { -webkit-animation-delay: -2.5446368156s; animation-delay: -2.5446368156s; } .Snow-flake:nth-child(7) { -webkit-animation-delay: -1.5677614822s; animation-delay: -1.5677614822s; } .Snow-flake:nth-child(8) { -webkit-animation-delay: -2.3025289221s; animation-delay: -2.3025289221s; } .Snow-flake:nth-child(9) { -webkit-animation-delay: -2.2273608114s; animation-delay: -2.2273608114s; } .Snow-flake:nth-child(10) { -webkit-animation-delay: -2.8704051936s; animation-delay: -2.8704051936s; } .Snow-flake:nth-child(11) { -webkit-animation-delay: -3.1400586948s; animation-delay: -3.1400586948s; } .Snow-flake:nth-child(12) { -webkit-animation-delay: -0.3667266026s; animation-delay: -0.3667266026s; } .Snow-flake:nth-child(13) { -webkit-animation-delay: -1.7854983938s; animation-delay: -1.7854983938s; } .Snow-flake:nth-child(14) { -webkit-animation-delay: -0.3196037779s; animation-delay: -0.3196037779s; } .Snow-flake:nth-child(15) { -webkit-animation-delay: -1.964419289s; animation-delay: -1.964419289s; } .Snow-flake:nth-child(16) { -webkit-animation-delay: -2.791841093s; animation-delay: -2.791841093s; } .Snow-flake:nth-child(17) { -webkit-animation-delay: -2.0680800485s; animation-delay: -2.0680800485s; } .Snow-flake:nth-child(18) { -webkit-animation-delay: -1.3058220809s; animation-delay: -1.3058220809s; } .Snow-flake:nth-child(19) { -webkit-animation-delay: -3.4707126316s; animation-delay: -3.4707126316s; } .Snow-flake:nth-child(20) { -webkit-animation-delay: -0.6200169916s; animation-delay: -0.6200169916s; } .Snow-flake:nth-child(21) { -webkit-animation-delay: -1.3589008464s; animation-delay: -1.3589008464s; } .Snow-flake:nth-child(22) { -webkit-animation-delay: -3.2398063322s; animation-delay: -3.2398063322s; } .Snow-flake:nth-child(23) { -webkit-animation-delay: -2.6176651192s; animation-delay: -2.6176651192s; } .Snow-flake:nth-child(24) { -webkit-animation-delay: -3.8524291697s; animation-delay: -3.8524291697s; } .Snow-flake:nth-child(25) { -webkit-animation-delay: -0.4768476793s; animation-delay: -0.4768476793s; } .Snow-flake:nth-child(26) { -webkit-animation-delay: -3.4299640078s; animation-delay: -3.4299640078s; } .Snow-flake:nth-child(27) { -webkit-animation-delay: -2.3016890045s; animation-delay: -2.3016890045s; } .Snow-flake:nth-child(28) { -webkit-animation-delay: -0.5442387221s; animation-delay: -0.5442387221s; } .Snow-flake:nth-child(29) { -webkit-animation-delay: -0.0972386453s; animation-delay: -0.0972386453s; } .Snow-flake:nth-child(30) { -webkit-animation-delay: -3.7545507289s; animation-delay: -3.7545507289s; } .Snow-flake:nth-child(31) { -webkit-animation-delay: -2.6359017685s; animation-delay: -2.6359017685s; } .Snow-flake:nth-child(32) { -webkit-animation-delay: -3.5004651428s; animation-delay: -3.5004651428s; } .Snow-flake:nth-child(33) { -webkit-animation-delay: -3.0667933556s; animation-delay: -3.0667933556s; } .Snow-flake:nth-child(34) { -webkit-animation-delay: -3.8334187764s; animation-delay: -3.8334187764s; } .Snow-flake:nth-child(35) { -webkit-animation-delay: -3.4092893657s; animation-delay: -3.4092893657s; } .Snow-flake:nth-child(36) { -webkit-animation-delay: -3.0679398153s; animation-delay: -3.0679398153s; } .Snow-flake:nth-child(37) { -webkit-animation-delay: -0.5319986551s; animation-delay: -0.5319986551s; } .Snow-flake:nth-child(38) { -webkit-animation-delay: -0.2151432213s; animation-delay: -0.2151432213s; } .Snow-flake:nth-child(39) { -webkit-animation-delay: -3.1537248027s; animation-delay: -3.1537248027s; } .Snow-flake:nth-child(40) { -webkit-animation-delay: -3.2429406902s; animation-delay: -3.2429406902s; } .Snow-flake:nth-child(41) { -webkit-animation-delay: -1.4561511317s; animation-delay: -1.4561511317s; } .Snow-flake:nth-child(42) { -webkit-animation-delay: -2.5445790184s; animation-delay: -2.5445790184s; } .Snow-flake:nth-child(43) { -webkit-animation-delay: -1.5814941713s; animation-delay: -1.5814941713s; } .Snow-flake:nth-child(44) { -webkit-animation-delay: -3.0079767172s; animation-delay: -3.0079767172s; } .Snow-flake:nth-child(45) { -webkit-animation-delay: -0.1491416773s; animation-delay: -0.1491416773s; } .Snow-flake:nth-child(46) { -webkit-animation-delay: -0.0382036011s; animation-delay: -0.0382036011s; } .Snow-flake:nth-child(47) { -webkit-animation-delay: -1.3252301845s; animation-delay: -1.3252301845s; } .Snow-flake:nth-child(48) { -webkit-animation-delay: -0.5701800381s; animation-delay: -0.5701800381s; } .Snow-flake:nth-child(49) { -webkit-animation-delay: -0.0226088033s; animation-delay: -0.0226088033s; } .Snow-flake:nth-child(50) { -webkit-animation-delay: -3.028402928s; animation-delay: -3.028402928s; } .Snow-flake:nth-child(51) { -webkit-animation-delay: -0.9428044719s; animation-delay: -0.9428044719s; } .Snow-flake:nth-child(52) { -webkit-animation-delay: -1.4180933824s; animation-delay: -1.4180933824s; } .Snow-flake:nth-child(53) { -webkit-animation-delay: -1.1818536686s; animation-delay: -1.1818536686s; } .Snow-flake:nth-child(54) { -webkit-animation-delay: -1.8777931193s; animation-delay: -1.8777931193s; } .Snow-flake:nth-child(55) { -webkit-animation-delay: -1.1268303298s; animation-delay: -1.1268303298s; } .Love { position: absolute; background: #fff; bottom: 0; height: 44px; width: 100%; left: 0; color: #a32300; } .Love-heart, .Love-text { display: inline-block; font-family: sans-serif; line-height: 44px; }
修改位置
//修改文字部分 猪猪圣诞快乐
效果展示
🎊雪橇雪人圣诞贺卡
代码块
HTML
2022圣诞快乐 ♥ 猪猪
JS
const hatEase = "Sine.easeInOut"; let hatDuration = 0.3; const hatTl = gsap.timeline({ repeat: -1, yoyo: true, }) .to('#hat-1',{ morphSVG: "M332.84 146.29s-3.54-36.88 76.59-39.21c0 0-23.41 39.65-38.22 46.62 0 0-33.76 16.5-38.37-7.41z", ease: hatEase, duration: hatDuration, },0) .to('#hat-ball',{ x: -10, y: -20, ease: hatEase, duration: hatDuration, },0) gsap.set('#snowman',{ x: -30, y: -30, }) gsap.set('#snowman-body',{ x: -5, y: -3, rotate: 10, transformOrigin: '30% 40%', }) const skingEase = "Sine.easeInOut"; const skingTl = gsap.timeline({ repeat: -1, yoyo: true, }) .to('#snowman',{ x: 30, y: 15, ease: skingEase, },"ski-right") .to('#snowman-body',{ x: 3, y: 3, rotate: -3, transformOrigin: 'center', ease: skingEase, },"ski-right") // .to('.head',{ // x: 2, // y: 2, // ease: skingEase, // },"ski-right") skingTl.timeScale(0.4) const speedTl = gsap.timeline({ paused: true, // repeat: -1, }) .to('#snowman-container',{ x: -50, y: 20, },0) .to('.head',{ x: -20, y: 20, },0) .to('#snaman-face',{ x: -3, y: 3, },0) .to('.arms',{ x: -10, y: 5, },0) .to('#stick-back',{ x: 0, y: -5, },0) .to('#stick-front',{ x: 0, y: -8, },0) .to('#left-arm-1',{ rotate: 20, transformOrigin: 'right top', },0) .to('#right-arm-1',{ rotate: 10, transformOrigin: 'right top', },0) function resetPosition(){ gsap.to('#snowman-container',{ x: 0, y: 0, }) gsap.to('.head',{ x: 0, y: 0, }) gsap.to('#snaman-face',{ x: 0, y: 0, }) gsap.to('.arms',{ x: 0, y: 0, }) gsap.to('#stick-back',{ x: 0, y: 0, }) gsap.to('#snowman-container',{ x: 0, y: 0, }) gsap.to('#stick-front',{ x: 0, y: 0, }) gsap.to('#left-arm-1',{ rotate: 0, }) gsap.to('#right-arm-1',{ rotate: 0, }) } for (let i = 0; i < 20; i++) { let snow = document.querySelector("#snow").cloneNode(true); gsap.set(snow, { attr: { cx: "115.05", cy: "117.16", r: "6.97", fill: "#fff" }, scale: "random(0.5, 1)", x: -100 + (i * 15), y: 200 + (i * 10), opacity: 0, }); document.querySelector("svg").appendChild(snow); const snowTl = gsap.timeline({ repeat: -1, }) .to(snow, { x: (i * 15) + 350, y: (i * 5), duration: "random(0.8, 1)", },0) .to(snow, { opacity: 1, duration: 0.1, },0) .to(snow, { opacity: 0, duration: 0.4, },"-=0.4") .seek(100) } const svg = document.getElementById("hover"); svg.addEventListener('mouseover', () => { hatTl.timeScale(1.8); skingTl.timeScale(0.9); speedTl.restart(); }) svg.addEventListener('mouseleave', () => { hatTl.timeScale(1); skingTl.timeScale(0.4); resetPosition(); })
CSS
body { width: 100%; height: 100vh; overflow: hidden; background: #f2adab; } .box { position: fixed; left: calc(50vw - 50vmin); top: calc(50vh - 37.5vmin); width: 100vmin; height: 75vmin; } svg { overflow: visible; } #snow { pointer-events: none; } .snow-clone { opacity: 0; }
效果展示
🎊祝福语圣诞贺卡
代码块
HTML
2022圣诞 | 给猪猪的礼物 情意绵绵,喜乐常。事事如意,人安康。风花雪月,圣诞至。祝福千万,表衷肠。家和兴旺,亲人吉祥,事业中天,学业辉煌。圣诞节快乐!
修改位置
情意绵绵,喜乐常。事事如意,人安康。风花雪月,圣诞至。祝福千万,表衷肠。家和兴旺,亲人吉祥,事业中天,学业辉煌。圣诞节快乐!
//修改文字部分
效果展示
🧧源码获取方式
圣诞树|圣诞贺卡 网站源码https://blog.csdn.net/dxt19980308?type=download
美酒,在酒杯中摇曳;灯火,在夜色中阑珊;幸福,在生活中陶醉;快乐,在节日中开怀;飞雪,在吉祥中飘落;问候,在真挚中送达。
希望大家在圣诞节都可以和喜欢的人在一起,送上那棵专属于她or他的圣诞树🎄🎄🎄!