前端利器——炫酷的CodePen

           媒介

  众所周知，前端是一个很容易将自己的劳动结果呈现出来的一个职位，无论是写1行代码照旧写100行代码，都可以通过页面来举行呈现，在工作中的劳作结果也是可以一眼就呈现给客户、用户的。好比一些精致的页面，炫酷的殊效，优质的交互等，都是前端人员所呈现出来的代码结果。炫酷的殊效也是必不可少的，通常来说，如果一个人写一个很不错的殊效，那么它一定会花费相当的时间，从最初的构思，到码代码，再到呈现到页面而且举行不停的修修改改，那么CodePen就出现了。
  1.CodePen是什么？

  CodePen是一个完全免费的前端代码托管服务，可以用来制作和测试页面的网站。
  2.CodePen有什么特点？

  1.可以即时预览。你也可以按照自己的需求在本地修改别人的预览作品，从而到达自己的需求结果
  2.支持多种主流预处理器，不须要手写生产级别的代码，无论是 Jade 、 LESS 、 Sass ，照旧CoffeeScript 、 es6+（ Babel ），都能利用。
  3.快速添加外部资源文件，只需在输入框里输入库名， CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。从而资助你提供更好的体验
  4.用户可以免费创建三个模板，克制了从零开始的标题。
  5.fork 功能：用于【备份他人的优秀作品】
  3.CodePen怎样利用？

  

• 点击打开CodePen，打不开的科学上网一下，我们可以看到这么一个界面（这里须要注册一下，固然可以举行Github/tuite/邮箱等登录）
  

                         2.既然想免费利用那么点击这个0$的即可
                         3.乐成注册之后点击Your Work，这里就可以进入你的工作区了，可以看到你迩来编辑的任务哦也可以根据名称举行搜刮。Trending这里有很多优秀的作品，可以直接点开，然后再作品里面编辑修改。Following就是关注的人，在这里你可以看到他们的全部作品以及及时更新的作品
                         4.他人作品点开之后可以看到有html，css，js以及展示区，可以即时编辑并生存到本地，生存到本地的就可以直接再YourWork的区举行检察以及再次修改编辑
                         5.举行npm包的安装和本地资源的引入，点击设置—可以看到各种设置，在这里可以对html，css，js等举行相应的设置
                         6.更该视图，这里和浏览器的控制台一样可以根据自己喜好的位置举行做自己喜爱的殊效
                         7.spark，是一些比力优秀的作品展示，在这里可以看到更多优秀的作品(这个是我比力喜好的，我称它为鼠标修狗)
                       

1.   // 鼠标修狗
2.   //  A ---- A  ________ ________
3.   // |         |         |        |
4.   // | ^     ^ |         |        |
5.   //  ____^___  _________|________|
6.   //            | |  | |  | |  | |
7.   //             1    2    3    4
8.   //             L    R    L    R

复制代码

写在末了

  <blockquote class="kdocs-blockquote" style="">   CodePen真的是一个优秀者云集的地方，它们无私的把这些殊效分享给大家，每个人都能感受到，它们带来的快乐，甚至更为部分前端程序员解决了部分难题，山鱼感觉这个很不错，给大家分享一下，今天的CodePen就到这里了，更多优秀的功能内容大家就自己去探索吧究竟惊喜自己发现的才有意思。   
点赞：您的赞赏是我前进的动力！   收藏：您的支持我是创作的源泉！   ⭐批评：您的发起是我改进的良药！   ✍JavaScript专栏：   小嘎鱼学JS ，Vue专栏：   小嘎鱼学Vue ，殊效专栏：   小嘎鱼玩殊效 ，欢迎大家加入我的个人社区——   山鱼社区   

来源：https://blog.csdn.net/zhaochen1127/article/details/128861410
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！