CodePen是有才华的前端开发人员的在线游乐场 ，在这里，您可以随时找到很酷的项目来扩大自己的视野，并查看其他开发人员的工作。 年终假期是个让您的亲人有创意的个人项目惊喜的好时机，或者感谢您的客户提供一些凉爽，前沿的设计，这将为假期加油打气。

在这篇文章中，我们将窥探CodePen上的20个很棒的圣诞节实验 ，您可以从中汲取灵感来创建自己的设计。

1.

这个可爱的家庭圣诞节歌集应用程序可以播放SoundCloud上托管的您最喜欢的圣诞节歌曲。 样式规则以LESS样式表语言编写，音乐播放器功能由自定义jQuery插件提供。

背景中的雪花和圣诞树图标为设计增添了庄重的氛围，如果将鼠标悬停在笔上，您还会发现一些细微CSS效果。

2.

圣诞节的设计始终是一项感激的工作，因为可以通过许多创造性的方式来构建其典型的视觉元素。 这支笔就是一个很好的例子。 刚开始时，您只能看到看似与假期无关的彩色三角形，但是当您单击“显示”按钮时，它们将被设置为一棵圣诞树。 这不仅是一个独特的解决方案，而且让人想起更简单的游戏。

3.

如果要为圣诞节创建酷的动画，则不必使用JavaScript。 在这支笔中，降雪动画和背景图像都完全是用CSS创建的。 值得检查一下代码，因为它显示了CSS3的强大功能。 背景图像甚至可能被误认为是真实的SVG图形。

4.

奔跑的圣诞老人！ 是一个有趣JavaScript游戏，它通过使用phaser.js HTML5游戏框架来度假。 该游戏中没有太多规则：圣诞老人无限运行，或者至少直到他摔倒为止。 这支笔为您提供了一个极好的机会，以了解如何使用JavaScript编写更简单的游戏。

5.

在学校和办公室里，从帽子里摘名字一直是人们选择“秘密圣诞老人”的一种流行方式-这种笔仅仅是这种传统的数字版本。 由于它仅使用原始JavaScript，因此您可以轻松地将其嵌入到自己的网站中。 只需更改Give变量内的名称即可。

6.

这些欢快的圣诞球是使用纯CSS编写的，并利用了边框半径规则。 球的不同部分通过利用精确计算的相对位置设置在一起。

如果要在网页上快速添加节日气氛，只需将其中一些球插入与网站总体设计相匹配的颜色中的适当位置即可。

7.

您可以将这些雪花悬停在桌面上，也可以通过倾斜智能手机来移动它们。 该功能由面向对象JavaScript提供，开发人员巧妙地使用它来创建自定义的Snowflake类。

雪花本身是在CSS3中构建的，背景使用了渐变-这支笔根本没有图像。

8.

假日手风琴简直就是美丽。 如果将鼠标悬停在某个选项卡上，则会通过扩展一点来使其聚焦，如果单击该选项卡，它将突然弹出并覆盖整个页面。 有趣的是，这支笔使用了CSS样式的可缩放矢量图形（SVG）。

SVG比看起来乍一看更强大，它们可以按照与常规HTML元素相同的样式规则进行巧妙地定位和设计。

9.

谁说平面设计需要无聊？ 这个可爱的雪人可以轻松地将圣诞节气氛添加到任何设计中。 没有用于雪人的图像，它完全用CSS编写。 值得看一下CSS代码，看看开发人员如何使用：before和：after伪选择器来达到预期的结果。

10.

您可以使用高级前端开发工具来简化仅CSS3图像的创建； 精心设计CSS3雪花就是一个很好的例子。 开发人员利用了可编译为HTML的Jade模板语言以及Sass CSS预处理器来实现这种令人惊叹的雪花设计。

11.

聪明的设计经常选择细微的解决方案，就像这支笔中的下雪的圣诞节按钮一样。 深红色背景是圣诞节设计的理想选择。 毕竟，并非所有事物都需要绿色。

颜色，渐变，字体和悬停效果使此按钮非常优雅和庄重。 您只需要几个即可在圣诞节期间快速装饰网站。

12.

如果您喜欢视差滚动 ，为什么不将其用于假日设计？ 该笔的开发者巧妙地尝试了这种效果，并以一种不太常见的方式使用了Parallax.js jQuery插件，滚动效果不是像往常一样是垂直的，而是水平的。 令人印象深刻的降雪加剧了圣诞节的气氛

如果我不得不挑这支笔的任何缺陷，那将是颜色的选择：部分为白色背景上的白色字母会大大削弱设计的可访问性。

13.

您可以借助CSS3创建一个完全独特的圣诞节包装纸。 这支笔的开发者为此显示了不仅一个，而且还显示了六个变体。 通过巧妙地利用CSS渐变和background-blend-mode属性可以实现漂亮的图案。

您可以在开发人员自己的网站上找到更多更酷的示例和详细说明。

14.

这种富有想象力的设计受到了传统俄罗斯娃娃 （娃娃内的娃娃）的启发。 如果通过单击打开外部框，则会显示一个内部框，该内部框也是另一个内部框的外部框。 该功能使用jQuery编写，并且在CSS文件中借助绝对位置和相对位置规则来设置框的确切位置。

15.

如果设法通过拖动将其从礼物中移除，您可以查看一下超酷的去皮效果，该效果可以揭示礼物的内部内容。 您可以在开发人员的网站上阅读完整的教程，这是一个绝对值得学习的技巧。 如果您只想使用代码，也可以从GitHub克隆它。

16.

圣诞节可能是尝试新事物的好时机，就像开发人员使用HTML5画布作为动画背景在这支笔中所做的一样。 画布位于HTML文件中的内容（节日快乐！）之前，并且借助智能CSS定位将其设置为背景。

笔还使用包含在单独JavaScript文件中的背景动画脚本 。

17.

这款引人注目的礼品卡不仅用于圣诞节，当您想在网站上用礼物给用户惊喜时，可以随时使用。 它不完全依赖于JavaScript，因为它完全是用Sass样式表语言编写的。

该设计利用了剪切路径 CSS3属性，该属性允许开发人员仅显示元素的特定区域，而不是显示元素的整个区域。

18.

仅使用HTML和CSS3的这种无限欢笑的圣诞老人，便可以让您有机会了解如何在实践中使用关键帧动画语法 。 在CSS3中，可以使用@keyframes规则来指定动画的规则，然后可以通过使用animation CSS3属性将该指定的动画绑定到某个元素。

您需要将关键帧的名称添加为animation属性的第一个值，就像开发人员使用专门为这支笔创建的自定义关键帧（称为bodyLaugh，beardLaugh，headLaugh和mouthLaugh）进行的操作一样。

19.

如果将鼠标悬停在这个令人印象深刻的Xmas Cracker上，它会显示一条独特的圣诞节信息，这是一种祝您的访客圣诞快乐的惊人方式。 HTML用HAML （HTML抽象标记语言）编写，而样式规则则利用了Sass语法超棒的Styesheets语言的功能。

结果确实很聪明。 通过添加更多JavaScript，它甚至可以用于向用户传递自定义报价或消息。

20.

这些闪烁的圣诞灯可以Swift为任何网站营造独特的氛围。 前端代码是用HAML编写的，可以编译成HTML， Sass可以编译成CSS，以及jQuery。

通过CSS3提供的上述@keyframes规则可以实现动画发光效果。 通过使用HSL色标将上一个led的Hue值增加50度，可以在jQuery文件中设置led的颜色。

翻译自: https://www.hongkiat.com/blog/christmas-experiment-codepen/