9个超赞的视觉效果See the Pen <a href='https://codepen.io/yumeeeei/pe

（以下项目均来自于CodePens，CodePens用于代码托管和页面效果展示）

图片来源 unsplash

Love

Pug + CSS |By: yumeeeei

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/yumeeeei/pen/BQPmpX/&amp;amp;#39;&amp;amp;gt;Love is Love 🌈&amp;amp;lt;/a&amp;amp;gt; by yumeeeei (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/yumeeeei&amp;amp;#39;&amp;amp;gt;@yumeeeei&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

交互式SVG信息表

HTML + CSS + JavaScript | By: Chris Gannon

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/chrisgannon/pen/pbzEYr/&amp;amp;#39;&amp;amp;gt;Interactive SVG Info Graph&amp;amp;lt;/a&amp;amp;gt; by Chris Gannon (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/chrisgannon&amp;amp;#39;&amp;amp;gt;@chrisgannon&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

文本粒子特效

HTML + CSS + JavaScript | By: Gthibaud

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/Gthibaud/pen/pyeNKj/&amp;amp;#39;&amp;amp;gt;Text particle&amp;amp;lt;/a&amp;amp;gt; by gtibo (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/Gthibaud&amp;amp;#39;&amp;amp;gt;@Gthibaud&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

页面切换动画

React + SCSS | By: sdras

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/sdras/pen/gWWQgb/&amp;amp;#39;&amp;amp;gt;React Animated Page Transitions&amp;amp;lt;/a&amp;amp;gt; by Sarah Drasner (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/sdras&amp;amp;#39;&amp;amp;gt;@sdras&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

白天黑夜特效

HTML + CSS + jQuery | By: catagen

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/Catagen/pen/PqYdXR/&amp;amp;#39;&amp;amp;gt;Day Night simulation&amp;amp;lt;/a&amp;amp;gt; by Szymon Stypa (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/Catagen&amp;amp;#39;&amp;amp;gt;@Catagen&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

鼠标滑动特效

SCSS + jQuery | By: renatorib

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/renatorib/pen/gBLDA/&amp;amp;#39;&amp;amp;gt;Mouse balls animation&amp;amp;lt;/a&amp;amp;gt; by Renato Ribeiro (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/renatorib&amp;amp;#39;&amp;amp;gt;@renatorib&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

3D太阳系

HTML + CSS + jQuery | By: renatorib

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/juliangarnier/pen/idhuG/&amp;amp;#39;&amp;amp;gt;CSS 3D Solar System&amp;amp;lt;/a&amp;amp;gt; by Julian Garnier (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/juliangarnier&amp;amp;#39;&amp;amp;gt;@juliangarnier&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

时间轴导航

HTML + SCSS + jQuery | By: nailaahmad

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/nailaahmad/pen/MyZXVE/&amp;amp;#39;&amp;amp;gt;Timeline Style Navigation&amp;amp;lt;/a&amp;amp;gt; by Naila Ahmad (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/nailaahmad&amp;amp;#39;&amp;amp;gt;@nailaahmad&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.

天气特效

HTML + SCSS + jQuery | By: steve3003

See the Pen &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/steveg3003/pen/Gqakbo/&amp;amp;#39;&amp;amp;gt;Animated Weather Cards&amp;amp;lt;/a&amp;amp;gt; by Steve Gardner (&amp;amp;lt;a href=&amp;amp;#39;https://codepen.io/steveg3003&amp;amp;#39;&amp;amp;gt;@steveg3003&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href=&amp;amp;#39;https://codepen.io&amp;amp;#39;&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;.