今天是圣诞节，祝大家节日快乐！推荐15款 Codepen 上非常不错的CSS/HTML动画特效，有兴趣的童鞋可以下载源代码，点击演示栏右上角 Codepen，可进入编辑页面编辑或者下载代码。非常棒的 CSS/HTML 动画效果，值得收藏。

 

1、加载动画：#7animation: cat loader

作者：Claudia

See the Pen #7animation: cat loader by Claudia on CodePen

 

2、Anime JS 特效：Stepper Iteration with Anime JS

作者：Valery Alikin

See the Pen Stepper Iteration with Anime JS by Valery Alikin  on CodePen.

 

3、电影标题特效：FlyIn Movie Title

作者：Vuild

See the Pen FlyIn Movie Title by Vuild on CodePen.

 

4、特殊效果：clip-path experiment 👨‍🔬

作者：Dronca Raul

See the Pen clip-path experiment 👨‍🔬 by Dronca Raul on CodePen.

 

5、响应式蜂窝特效：Honeycomb Layout

作者：Jesús Castro

See the Pen Responsive Honeycomb Layout by Jesús Castro on CodePen.

 

6、阴影特效：Cast shadow visualization

作者：Scott Kennedy

See the Pen Cast shadow visualization by Scott Kennedy on CodePen.

 

7、添加文件动画效果：Add file tab bar animation

作者：Aaron Iker

See the Pen Add file tab bar animation by Aaron Iker on CodePen.

 

8、地点标记动画效果：Santa Stop Here!

作者：Chris Gannon

See the Pen Santa Stop Here! by Chris Gannon on CodePen.

 

9、加载效果：🍕 Pizza Loader 🍕

作者：Chris Gannon

See the Pen 🍕 Pizza Loader 🍕 by Chris Gannon on CodePen.

 

10、火焰特效：FIRE!

作者：Inexorable Ace

See the Pen FIRE! by Inexorable Ace on CodePen.

 

11、雪人动画效果：Snowman CSS Project

作者： Heather Shar

See the Pen Snowman CSS Project by Heather Shar on CodePen.

 

12、Hooks新特性：React Hooks - useSpeechSynthesis

作者：halvves

See the Pen React Hooks - useSpeechSynthesis by halvves on CodePen.

 

13、下拉列表效果：drop down menu

作者：steven

See the Pen CSS only drop down menu by steven on CodePen.

 

14、时钟动画效果：Simple Clock

作者：Ulrich-Matthias Schäfe

See the Pen Simple Clock by Ulrich-Matthias Schäfer on CodePen.

 

15、滑块动画效果：Slider Pips ~~ VueJs

作者：Simon Goellner

See the Pen Slider Pips ~~ VueJs by Simon Goellner on CodePen.

赏