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

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

weixin_33949359

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

阅读量126

点赞数

CC 4.0 BY-SA版权

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

本文精选了一系列使用SVG和CSS实现的创意互动网页动画案例，包括琉璃珠轨迹动画、3D城市地图生成器、交互式灯泡等，展示了前端技术在视觉体验上的无限可能。

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

跟随鼠标轨迹的琉璃珠
https://codepen.io/enxaneta/f...

随机生成城市 3d 地图
https://codepen.io/nicoptere/...

与鼠标交互的灯泡
https://codepen.io/DollarAksh...

选择汉堡包的交互动画
https://codepen.io/chrisganno...

用 svg 写的小球弹跳下落的动画
https://codepen.io/chrisganno...

纯 css 写的图片颜色渐变效果
https://codepen.io/jcoulterde...

纯 css 写的烟雾效果
https://codepen.io/jcoulterde...

纯 css 写的心愿单交互效果
https://codepen.io/jcoulterde...

用 svg 写的大猩猩交互动画
https://codepen.io/alpha1337/...

纯 css 写的立体动画
https://codepen.io/Tsankashvi...

立方体动画
https://codepen.io/ianespanto...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33949359

关注关注

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

229

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 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

147

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。图片入场的的粒子效果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/... 弹性布...

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

weixin_33758863的博客

04-22

117

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。图片切换效果https://codepen.io/AlikinVV/f... 基于 dom 的可换肤的自行车https://codepen.io/jh3y/full/... 用 svg 写的大金钢像素画淡入淡出效果https://codepen.io/pieter-...

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

pw3270-5.4-1.el8.tar.gz

09-10

# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

Python100-master (4).zip

09-10

c Python100-master (4)

风险管理在施工项目管理中的应用.doc

09-10

风险管理在施工项目管理中的应用.doc

计算机多媒体技术专业样-就业方向与前景.doc