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

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

weixin_34216196

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

阅读量122

点赞数

CC 4.0 BY-SA版权

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

本文精选了一系列使用纯CSS实现的创意动画案例，包括IPod模拟、飞龙动画、小兔子跳跃等，展示了CSS的强大功能及创意应用。

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

纯 css 画的 ipod
https://codepen.io/DanGasson/...

用 svg 画的海报
https://codepen.io/matchboxhe...

纯 css 写的飞龙动画
https://codepen.io/chriskirkn...

纯 css 写的小兔子跳跃动画
https://codepen.io/cobra_winf...

从文字上生长出枝蔓和花朵
https://codepen.io/steveg3003...

由三角形拼成的镜面的效果
https://codepen.io/kelvinh111...

用拖曳房顶来加盖房子的交互效果
https://codepen.io/creme/full...

当鼠标划入页面时图片弥散的效果
https://codepen.io/iremlopsum...

纯 css 写的计算器界面（不能运算）
https://codepen.io/apvarun/fu...

视差滚动应用在照片上的效果
https://codepen.io/lokesh/ful...

用 svg 写的打蛋器动画
https://codepen.io/lilianqian...

纯 css 画的大富翁游戏图
https://codepen.io/johnnycope...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34216196

关注关注

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-3-31）

weixin_34253539的博客

03-31

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。制作像素画的画板https://codepen.io/abeatrize/... 纯 css 画的晚上的风车https://codepen.io/miocene/fu... 纯 css 画的可爱猫头鹰https://codepen.io/mali_mis/f... ...

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

weixin_34365417的博客

03-27

186

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。电路图生成器https://codepen.io/tsuhre/ful... 用 canvas 画的公交模拟动画https://codepen.io/motorlatit... 墓碑生成器https://codepen.io/jakealbaug... 图片切换特效...

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-3-25）

weixin_33806300的博客

03-25

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 写的星球玩呼啦圈的动画https://codepen.io/jcoulterde... 纯 css 写的鸽子喝水动画https://codepen.io/miocene/fu... 纯 css 写的彩色冰棍https://codepen.io/astri...

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

weixin_34235371的博客

03-29

169

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 写的立方体动画https://codepen.io/davidkpian... 自动生成曼陀罗图案https://codepen.io/smlsvnssn/... 纯 css 写的线条动画https://codepen.io/cobra_winf... ...

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

weixin_34318326的博客

03-28

141

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 画的腊肠犬https://codepen.io/chriskirkn... 可以发声的风铃https://codepen.io/klarsongs/... 纯 css 画的美人鱼爱丽儿https://codepen.io/girlgeek/f... 纯 ...

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

weixin_33778778的博客

03-24

146

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 画的抽象小鸟https://codepen.io/gregoryb/f... 纯 css 制作的左侧弹出菜单https://codepen.io/plavookac/... 仿制 gmail 的页面布局https://codepen.io/ispyken...

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

weixin_33979745的博客

03-26

153

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以打开原始页面。登录/注册页面https://codepen.io/bermudaque... 鼠标划过粒子特效https://codepen.io/steveg3003... 纯 css 画的小猫头https://codepen.io/vicbergqui... 画五边形和五角形...

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

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

04-30

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

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

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

山东大学网络空间安全学院竞学实训课程报告.zip

09-08

山东大学网络空间安全学院竞学实训课程报告.zip

zhaorenjie110_SymmetricEncryptionAndDecryption_39740_1757320627449.zip

09-08

zhaorenjie110_SymmetricEncryptionAndDecryption_39740_1757320627449.zip

Maven 3.9.11 zip压缩格式，windows系统中解压即用