9个超赞的视觉效果

原文出处 HTML, CSS, and JavaScript: 10 Awesome CodePens To Inspire You

(以下项目均来自于CodePens,CodePens用于代码托管和页面效果展示)


图片来源 unsplash


Love

Pug + CSS |By: yumeeeei

<iframe height='470' scrolling='no' title='Love is Love ?' src='//codepen.io/yumeeeei/embed/BQPmpX/?height=471&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Love is Love ? by yumeeeei (@yumeeeei) on CodePen. </iframe>

交互式SVG信息表

HTML + CSS + JavaScript | By: Chris Gannon

<iframe height='470' scrolling='no' title='Interactive SVG Info Graph' src='//codepen.io/chrisgannon/embed/pbzEYr/?height=464&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Interactive SVG Info Graph by Chris Gannon (@chrisgannon) on CodePen. </iframe>

文本粒子特效

HTML + CSS + JavaScript | By: Gthibaud

<iframe height='470' scrolling='no' title='Text particle' src='//codepen.io/Gthibaud/embed/pyeNKj/?height=433&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Text particle by gtibo (@Gthibaud) on CodePen. </iframe>

页面切换动画

React + SCSS | By: sdras

<iframe height='470' scrolling='no' title='React Animated Page Transitions' src='//codepen.io/sdras/embed/gWWQgb/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen React Animated Page Transitions by Sarah Drasner (@sdras) on CodePen. </iframe>

白天黑夜特效

HTML + CSS + jQuery | By: catagen

<iframe height='470' scrolling='no' title='Day Night simulation' src='//codepen.io/Catagen/embed/PqYdXR/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Day Night simulation by Szymon Stypa (@Catagen) on CodePen. </iframe>

鼠标滑动特效

SCSS + jQuery | By: renatorib

<iframe height='470' scrolling='no' title='Mouse balls animation' src='//codepen.io/renatorib/embed/gBLDA/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Mouse balls animation by Renato Ribeiro (@renatorib) on CodePen. </iframe>

3D太阳系

HTML + CSS + jQuery | By: renatorib

<iframe height='470' scrolling='no' title='CSS 3D Solar System' src='//codepen.io/juliangarnier/embed/idhuG/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen CSS 3D Solar System by Julian Garnier (@juliangarnier) on CodePen. </iframe>

时间轴导航

HTML + SCSS + jQuery | By: nailaahmad

<iframe height='470' scrolling='no' title='Timeline Style Navigation' src='//codepen.io/nailaahmad/embed/MyZXVE/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Timeline Style Navigation by Naila Ahmad (@nailaahmad) on CodePen. </iframe>

天气特效

HTML + SCSS + jQuery | By: steve3003

<iframe height='470' scrolling='no' title='Animated Weather Cards' src='//codepen.io/steveg3003/embed/Gqakbo/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Animated Weather Cards by Steve Gardner (@steveg3003) on CodePen. </iframe>