18个你可能不相信的前端炫酷特效，附观赏地址与下载源码
image
作者 | 杨小二
来源 | web前端开发（web_qdkf）
记得在很早之前跟大家分享一篇文章《18个你可能不相信是用CSS制作出来的东西》里面有一个案例是Chris Pattle使用纯CSS创建的Simpsons家族。他把每个角色的脸部拆分成很小的形状，然后又拼接回去。他甚至给角色的眼睛添加了动画来赋予它们生命力。
image
后来，我还特意去查看了里面的源码，看看他们是怎么来写这样的效果的，感觉国外的一些工程师，真的脑洞很大，耐心也很好，喜欢专研。
当然啦，如果你也想学习的话，你也可以到下载地址获取Simpsons家族这个纯CSS打造的效果。
源码地址如下：
链接: https://pan.baidu.com/s/1NpukLv0xbLMveNiDDN3R3g
提取码: p7iw
而今天我要跟大家分享的也是一些非常炫酷的前端效果，当然这个里面也有纯CSS打造的，还有的是借助了JS来呈现的一些效果，你除了学习他们写的代码外，你还可以研究一下，他们实现的一些思路。
在这些效果里，我都附上了观赏地址，里面可以查看源码，有的没有地址的，我会把源码单独附上，主要供大家学习研究使用。
接下来，我就来看看这些炫酷的前端效果。
01、这个是Diana Smith的三幅作品，我说是纯CSS打造的，你会相信吗？但是，这个就是完全由纯CSS打造的。里面的所有形状都是使用了手绘坐标和贝塞尔曲线。
效果如下：
image
image
image
看完这三幅作品，什么感受？是不是酷比了，反正，我觉得，就算是设计师，用PS纯手绘，也要下点功夫，更何况是纯CSS，是不是瞬间觉得CSS很强大？有没有喜欢上CSS小姐姐呀？
源码下载地址如下：
链接: https://pan.baidu.com/s/1sF8LBUHbZiK63cXS_SUJ7w
提取码: 3aku
02、作品名称：Misaki Nakano的香椿阴影，
观赏地址：https://mnmxmx.github.io/toon-shading/dst/index.html
image
03、作品名称：史蒂夫加德纳摇摇欲坠的Squiggly
这个是一个鼠标效果，当你打开预览的地址，你就的鼠标移动，就会出现下图这样的像一条线一样的色彩，很漂亮。
观赏地址：https://codepen.io/ste-vg/full/qobgBM
image
04、作品名称：Yusuke Nakaya的404 Rolling Box
这个是只有CSS实现的404效果，还是很好玩的，有兴趣的小伙伴，也可以去点击看看。
观赏地址：https://codepen.io/YusukeNakaya/full/YLPVER/
image
05、Julia Muzafarova的纯CSS 4设计师
观赏地址：https://codepen.io/miocene/full/WJRXVg
image
06、Jack Rugile的单纯花发生器，这个很好看，效果很炫酷，
观赏地址：https://codepen.io/jackrugile/full/LeJowx/
image
07、约翰卡尔森的排斥者，这个里面的效果，平时在视频效果里会经常看到，但是在前端效果里，还是第一次看到可以这么玩耍。
观赏地址：https://codepen.io/DonKarlssonSan/full/XVxrGW/
image
08、这个是由Makemepulse团队开发的2018.makemepulse.com，这个网站非常炫酷。估计你很难想象原来前端还可以这么玩。
观赏地址：http://2018.makemepulse.com/
image
image
09、Yusuke Nakaya的无限步骤，纯CSS实现的效果，一个类似手护电梯的效果，个人觉得还是非常棒的。
观赏地址：https://codepen.io/YusukeNakaya/full/rJxevm/
image
10、Gerard Ferrandez的改变世界，这个效果，是一个由左向右无线蔓延的效果，效果非常炫酷。
观赏地址：https://codepen.io/ge1doot/full/GQobbq/
image
11、Karim Maaloul的迷幻波浪，这个效果，是一个鼠标跟随的效果，里面五彩斑斓的颜色，看起来有刺眼，但是你可以到观赏地址，去看看他们是怎么实现的，里面有源码有可以查看。
观赏地址：https://codepen.io/Yakudoo/full/rJjOJx/
image
12、这个由Chrome音乐实验室制作的Song Maker，类似电子琴的效果，鼠标点击后，会发出不同的声音出来，如果你熟悉乐谱，估计可以弹一首曲子出来，我不会弹钢琴，就是随便点了，音乐还是非常优美的。不同的颜色，不同的形状，代表不同的声音。
观赏地址：https://musiclab.chromeexperiments.com/Song-Maker/
image
13、变色龙
观赏地址：https://codepen.io/airnan/full/gvBMPV/
image
15、Tero Parviainen的神经鼓机，这个跟前面的Song Maker电子琴有点像，但是这个是架子鼓。你也可以去体验一下，挺好玩的。
观赏地址：https://codepen.io/teropa/full/JLjXGK/
image
本文完，如果你觉得今天的文章好看，也记得给我点好看。
最后，非常感谢你的阅读。
image
image
</article>
