javascript css 前端 css3 html 【圣诞节】简单代码实现圣诞树|圣诞贺卡 | 快来为心爱的她送上专属的圣诞礼物叭~

        圣诞节马上就要到了，不知道给自己喜欢的人准备什么样的惊喜吗？作为一名程序员，当然是用编程制作专属于她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

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

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

修改位置

//修改文字部分

效果展示

裏源码获取方式 

圣诞树|圣诞贺卡 网站源码https://blog.csdn.net/dxt19980308?type=download

        美酒，在酒杯中摇曳；灯火，在夜色中阑珊；幸福，在生活中陶醉；快乐，在节日中开怀；飞雪，在吉祥中飘落；问候，在真挚中送达。

   希望大家在圣诞节都可以和喜欢的人在一起，送上那棵专属于她or他的圣诞树！

相关文章