程式設計師也可以很浪漫，精選10個聖誕節特效及原始碼

阿新 • • 發佈：2022-12-13

最近離聖誕節不遠了、整理了一些關於聖誕相關的前端特效網頁設計和小遊戲的程式碼送大家、直接上效果吧。

程式碼過長的可直接預覽下載

聖誕節快樂 - 文字漸入動畫

<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>

　預覽獲取　

聖誕快樂 - 星星元素動畫特效

程式碼太長（600+行程式碼）可預覽下載預覽獲取

聖誕節賀卡 - 動畫特效

程式碼量過長預覽獲取　

沉睡的聖誕老人

<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>