Codepen 每日精选（2018-4-12）

最新推荐文章于 2020-06-09 20:21:05 发布

转载最新推荐文章于 2020-06-09 20:21:05 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014329750

本文集合了一系列使用纯CSS实现的创意动画效果，包括音乐可视化、激光剑绘制、火柴效果等，展示了CSS的强大功能和无限创意可能性。

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

音乐可视化
https://codepen.io/zadvorsky/...

纯 css 画的激光剑
https://codepen.io/YusukeNaka...

纯 css 写的火柴效果
https://codepen.io/YusukeNaka...

文字的出场和入场动画
https://codepen.io/supah/full...

幻灯片切换效果
https://codepen.io/supah/full...

随机画的风景画
https://codepen.io/ge1doot/fu...

为 iphoneX 换壁纸的效果
https://codepen.io/mohamedabu...

拉下灯绳打开广告灯箱的效果
https://codepen.io/dffontes/f...

游戏排行榜界面
https://codepen.io/cdonohue/f...

纸飞机的粒子效果
https://codepen.io/al-ro/full...

用 svg 和 css 写的 zippo 打火机动画
https://codepen.io/Techno-Tut...

纯 css 写的奶牛斑点动画
https://codepen.io/YusukeNaka...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33941350

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

SketchCode一个类似于JSFiddleCodePenJSBin离线桌面应用

08-09

一个离线类似于JSFiddle/CodePen/JSBin离线桌面应用，采用Vue Electron开发

nasa-image-of-the-day:使用NASA每日天文图片API按日期显示太空照片

05-13

NASA的当日形象使用NASA每日天文图片API按日期显示太空照片。工作CodePen： ://codepen.io/captainpainway/full/gaOpYV/ API链接：：

参与评论您还未登录，请先登录后发表或查看评论

教妹学Java(十八)：break 关键字详解

沉默王二

03-22

5429

你好呀，我是沉默王二，一枚颜值与才华俱在的程序员。本篇教程通过我和三妹对话的形式来谈一谈“Java 中的 break 关键字”。教妹学 Java，没见过这么又去的标题吧？“语不惊人死不休”，没错，标题就是这么酷炫，毕竟面向对象编程。专栏现在定价只要 9.9 元，我在想，优快云这是赔本生意啊，定价也太低了，趁早买，买到的同学我只能说你赚到了，后面优快云肯定会涨价。如果你购买了专栏，还可以...

Github每日精选：将近4万Star的Java、Python面试指南献给大家！

开源精选

05-08

4036

1、React-Native-Windows 微软开源的React native windows今天获得1109个Star，目前排名Github日榜第4的，使用React在Windows平台构建本地APP，并且提供了对Windows 10 SDK的支持，包括PC、平板二合一、Xbox等混合现实设备等。 2、Python算法入门教程用Python实现所有算法，今日获得了746个Star，已获超3...

【十万个编程篇】写文章与“写项目”的差别

大昱的博客

03-21

1202

自古暨今，世间陆续诞生出“现象级”的文学作品，如《左传》、《桃花源记》、《背影》等文章，又如《咏鹅》、《将进酒》、《一剪梅》等诗词。编程世界也同样续写着新的辉煌，如Unix、Windows、Linux等内核系统，又如Apache、Tengine、ECharts等开源项目。它们无一例外，都标志着历史的发展与演变过程。它们也拥有着独特的风格，只有“现...

Codepen 每日精选（2018-4-26）

weixin_34090643的博客

04-26

112

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 写的滑块控件https://codepen.io/thebabydin... 用 canvas 写的蜂巢动画https://codepen.io/towc/pen/z... 用 canvas 写的彗星风格的拖尾动画https://codepen.io/t...

Codepen 每日精选（2018-4-15）

weixin_33949359的博客

04-15

126

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。跟随鼠标轨迹的琉璃珠https://codepen.io/enxaneta/f... 随机生成城市 3d 地图https://codepen.io/nicoptere/... 与鼠标交互的灯泡https://codepen.io/DollarAksh... 选择汉堡...

Codepen 每日精选（2018-4-1）

weixin_34007886的博客

04-01

190

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。粒子文字生成器https://codepen.io/Gthibaud/f... 纯 css 画的小猫和小狗用电脑聊天的动画https://codepen.io/clarawrson... 纯 css 画的老式自行车https://codepen.io/Sarah_E...

Codepen 每日精选（2018-4-3）

weixin_34097242的博客

04-03

162

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 写的卫星围绕行星的动画https://codepen.io/YusukeNaka... 文字变汽车的动画https://codepen.io/PointC/ful... 用 vanvas 随机画的抽象几何图案https://codepen.io/ge1d...

前端每日挑战：截至2020年10月，已完成170多项作品，每天挑战自我！

02-04

前端每日挑战参见Codepen上的演示： ://codepen.io/comehope/pens/public/ 观看Scrimba上的交互式截屏视频： ://scrimba.com/playlist/pEgDAM 在Segmentfault（zh-cn）上阅读带注释的源代码： ://...

cookie-stand:一个代码合作伙伴临时项目

04-30

修改了专为Pat's设计的销售图表，以预测新Harold产品ABC cookie的每日销售量。我学到的是我开始学习如何使用JavaScript动态填充html，如何创建对象文字和对象构造函数（首选），并开始练习使用FOR LOOPS。我还...

使用纯 CSS 创作一个脉动 loader效果的

01-19

效果预览 ... https://codepen.io/comehope/pen/wYvGwr...每日前端实战系列的全部源代码请从 github 下载： https://github.com/comehope/front-end-daily-challenges 代码解读定义 dom，容器中包含 10 个子元素：

每日前端大厂面试题解析与技巧

- **动手实践**：通过项目实践和在线编码平台（如LeetCode、CodePen、CodeSandbox）动手编码，加深对知识点的理解。 - **阅读源码**：通过阅读优秀的开源项目源码来学习高质量的编码实践和架构设计。 - **参考书籍和...

[Leetcode 每日精选](本周主题-并查集) 547. 朋友圈

随便发挥的博客

06-09

228

题目难度: 中等原题链接今天继续来做并查集的问题, 这道题仍然比较基础, 而且也是个比较接近现实的问题了. 大家在我的公众号"每日精选算法题"中的聊天框中回复并查集就能看到该系列当前已经更新的文章了大家有什么想法建议和反馈的话欢迎随时交流, 包括但不限于公众号聊天框/知乎私信评论等等~ 题目描述班上有 N 名学生。其中有些人是朋友，有些则不是。他们的友谊具有是传递性。如果已知 A 是 B 的朋友，B 是 C 的朋友，那么我们可以认为.

二维码工具(1).zip