你不能错过的前端组件库之codepen

　　今天小渡把珍藏已久的宝贝
　　CodePen介绍大家
　　希望大家认真听讲哦!
　　CodePen是什么？
　　顾名思义
　　code+pen, 即＂代码笔＂
　　其寓意类似中国古代故事
　　＂神笔马良＂中的那个＂神笔＂
　　不过，这里的＂笔＂是写代码的＂神笔＂
　　貌似说得有些玄乎了
　　说穿了，CodePen就是
　　功能超全的组件库
　　CodePen能实现哪些功能？
　　CodePen所做的工作
　　是优秀前端demo的展示
　　我们进入其首页就可以看到
　　很多精湛的前端demo效果
　　是不是很魔性？
　　站点现有上百个精选效果
　　上千个各类前端demo效果
　　从中获得很多前端交互的灵感
　　当然
　　其中的技术实现也可以一并学习！
　　这也是小渡介绍CodePen项目最主要原因
　　——you can get, not only share!
　　CodePen网站绝对比你所见过的传统组件库要给力很多，CodePen 可以在线显示源码以及最终的运行结果, 提供协作工具的载入,而且每周都有新的特性发布。
　　闲话少叙，
　　小渡这就带大家看看
　　CodePen有哪些奇妙好玩又实用的功能~
　　大鲸鱼
　　没有人可以抗拒这个应用的简洁和可爱
　　仅仅是一些简单的形状
　　一个接一个的跟随着鼠标堆积而已
　　但是低延迟，阴影效果以及响应灵敏
　　以及所有的一切
　　都会让玩这个游戏的人满足的。
　　让大鲨鱼随着你翩翩起舞吧~！
　　弹窗(Avgrund)
　　codepen的Demo总是那么完美
　　所以要挑一个出来是如此的困难
　　选择这个应用的原因
　　是他实在是太实用了
　　我简直不敢相信真的见到了
　　视觉深度效果 控制得如此之好的
　　模态弹出窗口
　　撕裂纱布
　　我们有充分的理由证明这是
　　CodePen 150万个画面中最受欢迎 的
　　在重力和摇晃以及
　　纱布自身的折叠、裂开、掉落到地板
　　所有的一切组合之下
　　和它的交互是如此令人惊叹的真实
　　使用鼠标左键来撕扯、用右键来切割
　　如果太卡，会自动降低物理精度
　　机械草地
　　Tim Holman 的这只代码笔
　　立刻就将我带到了另一个奇幻的世界
　　比如爱丽丝梦游仙境的蒸汽朋克版
　　是不是非常炫酷
　　三角形视觉错觉
　　Ana Tudor 在教学程序上很强悍
　　在此揭示了可视化demo是如何制作的
　　这个经典而棘手的视觉错觉
　　是最受欢迎的一个例子
　　快来头脑风暴一下
　　三角形怎么多了一块空白？
　　火药进度条
　　小粒子的Demo尤其可爱
　　特别是火药进度条这种实用性很棒的东西
　　有这种进度条
　　我宁愿页面的加载速度像蜗牛一样
　　Twitter新概念Button
　　按钮的3D的CSS效果也可以如此
　　简洁、经典、高效
　　其实程序员要的并不多
　　满足这三点就够了
　　codepen给人的感觉就是
　　处处充满着奇妙与巧思
　　简直是宝藏一样的组件库啊！
　　无数效果等着你去深入挖掘学习
　　怎么样是不是按捺不住心中的洪荒之力了
　　马上打开https://codepen.io/
　　上手试试吧
　　更多免费学习资料请添加微信duyi4299领取~