今天是圣诞节,祝大家节日快乐!推荐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.