好玩的 CSS – 40 个有趣的 CSS 网站

好玩的 CSS – 40 个有趣的 CSS 网站💥 🔖 好玩的 CSS – 40 个有趣的 CSS 网站 🌐 基础学习 🧚 CSS 动画 🕹️ 教学游戏 🎰 代码生成 🎨 色彩搭配

🔖 好玩的 CSS – 40 个有趣的 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 布局

🎰 代码生成

🌚


glassgenerator.netlify.app/ 磨砂透明效果

coolbackgrounds.io/ 酷酷的背景图

www.pixelartcss.com/ 自定义像素素材

stripesgenerator.com/ 布条背景图生成器

svgwave.in/ 波纹生成器

numl.design/theme-gener… numl design 的主题生成器

color.adobe.com/zh/create/c… adobe 针对色盲用户可访问性,提供的一个色彩拾取工具

9elements.github.io/fancy-borde… 圆角 border-radius 的新玩法

accordionslider.com/ 纯 CSS 实现百叶窗

grid.layoutit.com/ 网格布局生成器

csslayout.io/ 纯 CSS 实现的一套页面元素、组件集

keyframes.app/animate/ CSS 动画生成器

cssanimate.com/ 又一个 CSS 动画生成器

www.cssfiltergenerator.com/ CSS 滤镜

imageslidermaker.com/ CSS 轮播生成器,依赖 jQuery 😂

www.30secondsofcode.org/css/p/1 30 秒代码片段 — CSS 篇

🎨 色彩搭配

colorhunt.co/ Color Hunt

mycolor.space/ 还是配色

clrs.cc/ 还是配色

cssgradient.io/ CSS 渐变色

参考:

今天的文章好玩的 CSS – 40 个有趣的 CSS 网站分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/14211.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注