0
点赞
收藏
分享

微信扫一扫

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

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

🎰 代码生成

🌚 sorry 这个网站挂掉了 盒子阴影 box-shadow 生成器

作为补偿,贴几个最近发现的非常好的工具网站

  • ​​www.toolb.dev/​​
  • ​​tiny-helpers.dev/​​

​​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 的新玩法

  • 根据上面的圆角,我们可以画出一滴水珠💦​​codepen.io/prathkum/pe…​​

​​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 渐变色

参考:

  • ​​github.com/jobbole/awe…​​ CSS 资源大全中文版
  • ​​github.com/awesome-css…​​ Awesome CSS
  • ​​juejin.cn/post/690371…​​ 一些CSS特效网站整理



举报

相关推荐

0 条评论