提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• • @[TOC](文章目录) as
• 前言
• 一、学习CSS
• • 1.CSS生成网站
  • 2.W3Schools
• 二、CSS特效
• • 1.animista
  • 2.Shake
  • 3.图片裁剪
  • 4.渐变生成
  • 5.分割式背景
  • 6.GSAP
  • 7.FRAMER
• 三、网页排版

as

前言

在进行前端的学习时，常常苦恼于没有灵感，或者不知道该如何去实现特效。通常情况下，学习得从模仿开始，知道了别人如何做的，我们才能发挥自己的能力进行创造，本页记录了个人常用的各种网站，以供参考

一、学习CSS

1.CSS生成网站

https://html-css-js.com/css/generator/box-shadow/

对于初学CSS的人来说常常不知道各种参数的作用，这个网站可以很好的帮助初学者认识，各个参数的影响，主动的调参。提高学习的兴趣。

2.W3Schools

https://www.w3schools.com/

经典学习网站

二、CSS特效

CSS特效有关的网站很多，这边只整理了个人觉得好用的

1.animista

animista.net

用一些基础的代码实现动画，推荐到里面找需要的特效，因为再要复杂要安装别的库，我很懒

2.Shake

https://elrumordelaluz.github.io/reshake/

整个网页提供了一个特效，就是shake

3.图片裁剪

http://tools.jb51.net/code/css3path

可以用于图片的各种编辑

4.渐变生成

https://cssgradient.io/

直接给出渐变颜色的代码，爽歪歪

5.分割式背景

https://wweb.dev/resources/css-separator-generator

种类太少了，可以参考

6.GSAP

https://gsap.com/

特效网站，挺有意思，要另外装库

7.FRAMER

https://www.framer.com/motion/scroll-animations/

也是一个需要库的网站

三、网页排版

https://cssgrid-generator.netlify.app/