CSS 学习网站

🌐 基础学习

cssreference.io/ CSS 参考书

chokcoco.github.io/CSS-Inspira… CSS 灵感

www.awwwards.com/sites/zero-… UI 设计师的灵感源泉

htmlcheatsheet.com/css/ 交互式在线 CSS 速记表

zh.learnlayout.com/ 学习 CSS 布局

css-tricks.com/ CSS 小花招

web.dev/learn/css/ web.dev 上的 CSS 教学专栏

www.w3schools.com/howto/ W3 How To 学习如何实现常见的页面组件

codemyui.com/tag/pure-cs… 450 多个纯 CSS 实现的 UI 设计 by Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

🧚 CSS 动画

纯 CSS 动画,这里不包含 JS 动画库

animate.style/ CSS 动画集

tholman.com/obnoxious/ 不过脑子的动效,不过看起来很“猛”

elrumordelaluz.github.io/csshake/ CSS 抖动特效

animxyz.com/ CSS 三维变换动画

animista.net/play/ CSS 动画集,可自由调节动画参数,生成代码片段

ianlunn.github.io/Hover/ CSS 鼠标悬浮动画

www.minimamente.com/project/mag… 适合做专场动画的 CSS 动效

🕹️ 教学游戏

cssgridgarden.com/ 通过给萝卜浇水,学习 CSS 网格布局

www.flexboxdefense.com/ CSS 塔防游戏,学习 flex 布局

flukeout.github.io/ 通过做饭,练习 CSS 选择器

flexboxfroggy.com/ 送小青蛙回家,学习 flex 布局

🎰 代码生成

🌚

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值