Codepen 每周精选：本周最值得推荐的 23 个页面特效（2018-5-28）

最新推荐文章于 2020-05-26 12:13:32 发布
最新推荐文章于 2020-05-26 12:13:32 发布
阅读量188 收藏 1
点赞数 1
文章标签： ui javascript ViewUI
原文链接：https://segmentfault.com/a/1190000015052915
版权

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

1. 随机生成的有流向的粒子效果
https://codepen.io/ge1doot/pe...

2. 用 jquery 写的变换动画
https://codepen.io/rachsmith/...

3. 闯关游戏
https://codepen.io/dissimulat...

4. 手势开机密码的 ui
https://codepen.io/khadkamhn/...

5. 绚丽的肥皂水特效
https://codepen.io/shubniggur...

6. 用 canvas 画的箭头图案喷泉效果
https://codepen.io/a-jie/pen/...

7. 纯 css 画的皮卡丘
https://codepen.io/tiffachoo/...

8. todo list UI
https://codepen.io/lucagez/pe...

9. 充满科技感的响应鼠标的点阵
https://codepen.io/K-T/pen/Qr...

10. 用 webgl 实现的图片呼吸效果
https://codepen.io/doublejump...

11. 用 svg 画的鲨鱼
https://codepen.io/PolarStarS...

12. 充满气泡的房间
https://codepen.io/ainalem/pe...

13. 纯 css 画的非常逼真的手表
https://codepen.io/Wujek_Greg...

14. 用 svg 画的繁复的机械装置
https://codepen.io/airnan/pen...

15. 纯 css 画的笔记本电脑，可以 360 度观看
https://codepen.io/internette...

16. 置身于立体空间中的动画效果
https://codepen.io/shubniggur...

17. 赛车游戏
https://codepen.io/arcs/pen/a...

18. 内容切换效果
https://codepen.io/shshaw/pen...

19. 图片切换特效
https://codepen.io/shshaw/pen...

20. 旋转入场的文字
https://codepen.io/SMLMRKHLMS...

21. 纯 css 写的炫彩动画
https://codepen.io/Tsankashvi...

22. 用 three.js 写的模拟洛伦兹吸引子的动画
https://codepen.io/sidtheslot...

23. 有背影音乐的 toggle 按钮
https://codepen.io/camstephen...

不得不提的，前端利器CodePen，超级方便好用！！！
前端视听
07-16 4674
整理：迷妹 大家好，我是为前端娱乐圈操碎了心的小迷妹，每天推荐一个小工具/源码/知识点，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标。 一直在整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习。 前端的案例/项目应当存放在那？GitHub？没问题,但是最为一个专业前端人员,如果你还没有用过 CodePen，是时候去了解一下了。 今天要推荐的是CodePen 传送门：https:/...
分享CodePen上6个酷炫demo特效
最新发布
趣谈前端
01-09 880
最近创作灵感匮乏, 来 CodePen 上找找灵感, 同时也给同样需要获取灵感的 coder (程序员们)带来一点点想象空间.首先分享一下 CodePen demo 集合网址:https://codepen.io/spark1. 像素背景这是 Wakana Y.K. 的一个巧妙的技巧：将图像的低分辨率版本放在顶部，并将其扩展以占据与原始图像相同的大小，使浏览器对其进行像素化。然后，悬停时的蒙版（使...
Codepen 每日精选（2018-4-19）
weixin_33805743的博客
04-19 153
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 纯 css 写的创意灯泡动画https://codepen.io/uzcho_/ful... 纯 css 画的文字阴影https://codepen.io/GeorgePark... 纯 css 画的海报https://codepen.io/vicbergqui.....
CodePen 作品秀：Canvas 粒子效果文本动画
weixin_34308389的博客
02-17 167
　　作品名称——Shape Shifter，基于 Canvas 的粒子图形变换实验。在页面下方的输入框输入文本，上面就会进行变换出对应的粒子效果文本动画。 　　CodePen 作品秀系列向大家展示来自 CodePen 网站的最优秀的 Web 效果，上面的那些 Demo 可以说都是艺术品，相信你看之后和我一样会被惊呆的！（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现...
Codepen 每日精选（2018-4-18）
weixin_34376562的博客
04-18 134
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 图片入场的的粒子效果https://codepen.io/jcoulterde... 制作蛋糕的交互动画https://codepen.io/jcoulterde... 纯 css 写的立体动画https://codepen.io/cobra_winf... 街霸游...
盘点一下CodePen上那些优秀的前端作品（01）
web前端开发
08-20 3902
编辑整理 | web前端开发CodePen 作为知名的前端交流社区，CodePen 上的技术高手们总能不间断的为我们带来各种的惊喜。今天我要跟大家分享的是一些比较酷的前...
react-codepen-clone::black_square_button:CodePen与React克隆
05-24
将仓库克隆到本地计算机上git clone https://github.com/zumrudu-anka/react-codepen-clone.git 转到项目文件夹 运行npm install安装软件包 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用...
codepen-clone:使用React构建的CodePen克隆
03-10
如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在...
react-codepen-embed:React组件以嵌入Codepen中的笔
05-07
npm install --save react-codepen-embed # using yarn yarn add react-codepen-embed 用法 import React from "react" ; import Codepen from "react-codepen-embed" ; const CodepenEmbedded = ( ) => { return ...
CodePen最佳实例分享
铁锚的CSDN博客
08-21 8141
原文地址： Chris Coyier’s Favorite CodePen Demos 原文日期： 2013年8月13日 翻译日期： 2013年8月21日 CodePen：  Build, Explore, and Teach the Web, Instantly. CodePen网站绝对比你所见过的传统代码分享站点要给力很多. CodePen 可以在线显示源码以及最
那些有趣的codepen项目
weixin_34315485的博客
03-09 1549
那些有趣的codepen项目codepen是一个在线的前端代码编辑运行的网站，支持前端现今的众多技术，比如babel，coffeescript， typescript， scss，less，stylus。可以用于在线展示demo或者代码。codepen目前项目众多，其中也不乏很多优秀的作品，本期周刊将把一些过目不忘，实用又有趣的项目，我收藏的全部家底儿都推荐给大家。不用言谢，点赞支持。文章超长，有...
HTML5炫酷科技感十足数据可视化
08-19
HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化HTML5炫酷科技感十足数据可视化
原生JS实现扫雷小游戏
Ireallyyourfather的博客
09-19 1323
原生JS实现扫雷小游戏 HTML部分 CSS部分 JavaScript部分 效果 -html代码 <!DOCTYPE html> <html lang="en"> <head
Codepen 每日精选（2018-4-8）
weixin_33940102的博客
04-08 91
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。 随机画出的树林https://codepen.io/ge1doot/fu... 纯 css 写的从空中俯视街道的效果https://codepen.io/yukulele/f... 纯 css 写的无尽隧道的动画https://codepen.io/YarivFrd...
codepen-resources:我的CodePen草图的样式和脚本
05-16
CodePen资源 :package: 我的CodePen草图的样式和脚本。 我的CodePen草图越来越大，难以管理。 由于预加工来源，如.scss和.coffee不能被导入到草图，这些资源是普通.css和.js只针对常绿浏览器的新功能减轻缺少预...
25个CodePen上激发你创作灵感的动画案例，附源码
web前端开发
05-26 2026
作品来源 |https://codepen.io/文章整理| 杨小二CodePen是很多程序员用来展示代码创作的首选在线工具。今天，我为大家精选的25个CodePen上CSS动画展...
用jQuery手写一个小游戏
weixin_34176694的博客
10-05 659
今天给大家带来一个小游戏体验链接CodePen码云源码链接Gitee要求：熟悉JavaScript继承的概念 游戏预览 玩法：开局一个球 两块板子。其中最上方是电脑板子，会跟着球跑。球达到板子上回弹回来。打到你的板子上也是回弹出去。如果达到了上下边界。游戏结束控制你的板子就用方向左右键接到一个球+10分基础布局部分(HTML+CSS)游戏部分，我们按照以下图示尺寸设定html:<d...
国内有没有类似jsfiddle这样的网站
lohiecan的专栏
11-21 3431
2013年 有这样一个问题， 国内有没有类似jsfiddle这样的网站 我就知道一个codepen，一个jsfiddle，这两个不翻墙的话，经常打不开。国内有没有类似的网站，或者国外的，速度比较快的。国外有很多好网站，可惜语言不通国内有没有类似jsfiddle这样的网站 2016年 ：codepen， jsfiddle 仍旧是经常打不开。 但是国内终于出了一个 jsrun.net 了！国内有没有
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值