最近离圣诞节不远了、整理了一些关于圣诞相关的前端特效网页设计和小游戏的代码送大家、直接上效果吧。
代码过长的 可预览获取
圣诞节快乐 - 文字渐入动画
<body>
<svg viewport="0 0 300 300">
<text class="Merry" x="150" y="50">Merry</text>
<text class="Christmas" x="150" y="120">Christmas</text>
</svg>
<div class="Snow">
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
<div class="Snow-flake"></div>
</div>
<div class="Love">
<div class="Love-heart">❤</div>
<div class="Love-text">Aranja</div>
</div>
</body>
圣诞快乐 - 星星元素动画特效
预览获取
圣诞节贺卡 - 动画特效
沉睡的圣诞老人
<body>
<div class="circular-bg">
<div class="moon"></div>
<div class="snores">
<div class="snore snore1">Z</div>
<div class="snore snore2">Z</div>
<div class="snore snore3">Z</div>
</div>
<div class="santa">
<div class="disc"></div>
<div class="hat">
<div class="hat-space"></div>
</div>
<div class="furr"></div>
<div class="face">
<div class="eyebrows eyebrows--left"></div>
<div class="eyebrows eyebrows--right"></div>
<div class="nose"></div>
<div class="beard">
<div class="beard--left"></div>
<div class="beard--right"></div>
</div>
<div class="mouth"> </div>
</div>
<div class="hand--up">
<div class="arm--right"></div>
<div class="hand--right"></div>
</div>
<div class="hand--left"></div>
<div class="stomach">
<div class="belt-buckle"></div>
</div>
<div class="leg--up"></div>
<div class="leg--down"></div>
</div>
<div class="christmas-tree">
<div class="tree-top4"></div>
<div class="tree-top3"></div>
<div class="tree-top2"></div>
<div class="tree-top1"></div>
<div class="tree-bottom"></div>
</div>
<div class="christmas-tree-small">
<div class="tree-top4"></div>
<div class="tree-top3"></div>
<div class="tree-top2"></div>
<div class="tree-top1"></div>
<div class="tree-bottom"></div>
</div>
<div class="christmas-tree-white">
<div class="tree-top4"></div>
<div class="tree-top3"></div>
<div class="tree-top2"></div>
<div class="tree-top1"></div>
<div class="tree-bottom"></div>
</div>
<div class="gift gift--orange">
<div class="gift-bow--left"></div>
<div class="gift-bow--right"></div>
<div class="gift-ribbon"></div>
<div class="gift-top"></div>
<div class="gift-bottom"></div>
</div>
<div class="gift">
<div class="gift-bow--left"></div>
<div class="gift-bow--right"></div>
<div class="gift-ribbon"></div>
<div class="gift-top"></div>
<div class="gift-bottom"></div>
</div>
</div>
</body>
圣诞节 - 九宫格拼图小游戏
<div class="puzzle">
<div class="heading">
<span>
<sub>★</sub> <sup>☆</sup> <sub>★</sub> <sup>☆</sup> <sub>★</sub> <sup>☆</sup> <sub>★</sub>
</span>
<h2>Simpleweb</h2>
<span>
<sup>★</sup> <sub>☆</sub> <sup>★</sup> <sub>☆</sub> <sup>★</sup> <sub>☆</sub> <sup>★</sup>
</span>
</div>
<div class="answer"></div>
<div class="grid">
<button class="tile tile--1" style="--area:A"></button>
<button class="tile tile--2" style="--area:B"></button>
<button class="tile tile--3" style="--area:C"></button>
<button class="tile tile--4" style="--area:D"></button>
<button class="tile tile--5" style="--area:E"></button>
<button class="tile tile--6" style="--area:F"></button>
<button class="tile tile--7" style="--area:G"></button>
<button class="tile tile--8" style="--area:H"></button>
<div class="tile tile--empty" style="--area:I"></div>
</div>
</div>
圣诞节 - 圣诞老人动画特效
<body>
<div class="window">
<div class="santa">
<div class="head">
<div class="face">
<div class="redhat">
<div class="whitepart"></div>
<div class="redpart"></div>
<div class="hatball"></div>
</div>
<div class="eyes"></div>
<div class="beard">
<div class="nouse"></div>
<div class="mouth"></div>
</div>
</div>
<div class="ears"></div>
</div>
<div class="body"></div>
</div>
</div>
<div class="message">
<h1>Merry Christmas!</h1>
</div>
</body>
自带bgm圣诞气氛灯网页背景
<div id="overlay">
<ul>
<li class="title">请选择音乐</li>
<li>
<button class="btn" id="btnA" type="button">
Snowflakes Falling Down by Simon Panrucker
</button>
</li>
<li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
<li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
<li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
<li class="separator">或者</li>
<li>
<input type="file" id="upload" hidden />
<label for="upload">Upload File</label>
</li>
</ul>
</div>
圣诞老人 - 坐标动画特效
<body>
<div id="animationWindow"></div>
<!-- partial -->
<script src='./js/lottie.min.js'></script>
<script src='./js/ScrubBodymovinTimeline.min.js'></script>
<script src="./js/script.js"></script>
</body>
圣诞树 - 旋转动态特效
<body>
<main>
<ul class="star" style="--v: 1; --t: 1;">
<li style="--i: 0"></li>
</ul>
<ul style="--v: 2; --t: 8; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
</ul>
<ul style="--v: 3; --t: 12">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
</ul>
<!-- 一直到 8个ul >
</main>
</body>
圣诞雪人 - 拖拽自绘特效
