Codepen 每日精选(2018-3-24)

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以打开原始页面。

纯 css 画的抽象小鸟
https://codepen.io/gregoryb/f...

纯 css 制作的左侧弹出菜单
https://codepen.io/plavookac/...

仿制 gmail 的页面布局
https://codepen.io/ispykenny/...

多边形碰撞检测,孤立的多边形是绿色,多边形容器相交变成蓝色,多边形本身相交变成红色。
https://codepen.io/osublake/f...

幻灯片切换效果,当点击缩略图时,缩略图会在设定好的路径上流动
https://codepen.io/lmgonzalve...

鼠标点击或按住鼠标拖拽时,屏幕上会出现几何形状,然后形状下落到屏幕底部消失。
https://codepen.io/zachhandin...

百科机器人,通过调用 wikipedia API,可以查询词条,也可以随机显示词条。
https://codepen.io/Becca941/f...

纯 css 制作的话剧海报
https://codepen.io/oliviale/f...

纯 css 画的胡子和眼睛可以动小老鼠
https://codepen.io/josbert/fu...

用 canvas 画的城市夜晚的高楼和夜空
https://codepen.io/fdsea/full...

用 div 画的气泡
https://codepen.io/lbenmore/f...

三角形波动特效
https://codepen.io/winkerVSbe...

在页面滚动时,用 svg 画出不同的动物
https://codepen.io/AliKlein/f...

音乐播放器界面
https://codepen.io/Grandvince...

codepen-clone-react 是一个用 React 框架开发的类似 CodePen 的代码编辑和运行环境的克隆项目。 该项目的源码主要分为几个部分: 首先,项目的文件结构包含了一些主要的文件和文件夹。其中,src 文件夹是我们主要关注的部分,它包含了所有的 React 组件、样式文件以及其他必要的文件。这些组件的文件结构和组织方式遵循了 React 的最佳实践,易于维护和扩展。 其次,该项目的主要功能是提供一个用户友好的代码编辑器界面,使用户能够输入、编辑和运行他们的代码。它具有语法高亮功能,可以根据代码语言自动应用不同的颜色。此外,它还具有代码自动补全、格式化代码和代码错误检查等功能,提供了一个愉快的编码体验。 代码编辑器的核心是基于 CodeMirror 组件实现的。它使用 React 组件进行封装,并通过使用状态管理库如 Redux 来处理用户输入的代码内容。这样用户可以实时编辑和运行他们的代码,而无需刷新页面。 最后,该项目还提供了一个运行结果的输出窗口,用户可以看到他们的代码在浏览器中实际运行的效果。它使用 iframe 标签作为代码运行的容器,并将用户的代码嵌入到 iframe 中执行。 总结来说,codepen-clone-react 的源码是一个使用 React 框架开发的类似 CodePen 的项目。它提供了一个用户友好的代码编辑和运行环境,实现了代码高亮、自动补全、格式化等功能,并通过 iframe 显示代码运行结果。该项目的源码结构清晰,易于维护和扩展,是一个学习 React 和代码编辑器开发的好例子。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值