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

最新推荐文章于 2018-04-26 00:25:02 发布

weixin_34081595

最新推荐文章于 2018-04-26 00:25:02 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

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

本文集合了一系列创意十足的代码片段示例，包括淡入效果、音乐播放器布局、交互式动画等，通过实际示例展示了如何使用SVG和CSS实现各种视觉效果及用户交互体验。

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

内容淡入效果
https://codepen.io/jcoulterde...

音乐播放器布局
https://codepen.io/jcoulterde...

添加商品到购物车的交互动画
https://codepen.io/jcoulterde...

能捕捉鼠标的变色龙
https://codepen.io/airnan/ful...

用 svg 写的沙漏动画
https://codepen.io/airnan/ful...

2d 按钮变成 3d 按钮
https://codepen.io/Anna_Batur...

翻转的数字
https://codepen.io/EricPorter...

用 svg 写的齿轮动画
https://codepen.io/Yuschick/f...

用 svg 画的海盗船长像素画
https://codepen.io/Yuschick/f...

交互式视频
https://codepen.io/Yuschick/f...

纯 css 写的 3d 动画文字
https://codepen.io/kotAndy/fu...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34081595

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

05-13

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

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

02-04

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

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

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...

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

weixin_33805743的博客

04-19

230

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 写的创意灯泡动画https://codepen.io/uzcho_/ful... 纯 css 画的文字阴影https://codepen.io/GeorgePark... 纯 css 画的海报https://codepen.io/vicbergqui.....

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

weixin_34409822的博客

04-16

120

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。内容切换的交互效果https://codepen.io/jcoulterde... 报价卡片的交互效果https://codepen.io/jcoulterde... 3d 菜单交互效果https://codepen.io/jcoulterde... 无尽的隧道ht...

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

weixin_34417200的博客

04-09

221

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。前端工程师的技能树https://codepen.io/SoyEva/ful... 纯 css 写的咖啡机动画https://codepen.io/jenningscr... 从各种视角观察纸盒的交互动画https://codepen.io/dabalose7e.....

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

weixin_34376562的博客

04-18

148

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。图片入场的的粒子效果https://codepen.io/jcoulterde... 制作蛋糕的交互动画https://codepen.io/jcoulterde... 纯 css 写的立体动画https://codepen.io/cobra_winf... 街霸游...

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

weixin_34292959的博客

04-14

149

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 写的蛋糕落在纸盘上的动画https://codepen.io/YusukeNaka... 色环https://codepen.io/thepheer/f... 纯 css 画的寿司餐https://codepen.io/sashatran/... 弹性布...

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 个子元素：

二维码(53).zip

09-12

二维码(53).zip

it‘s a simplified library of ZXing that convenient to encode