CSS TOOL

1. Gradient

2. Animations

3. Transition

4. Transform

1. Gradient

Style:	Linear Radial
Gradient:	Work with F12 Console
Angle:	deg
Shape:	ellipse(Default) circle
Repeating:	Gradient Repeating

2. AnimationsWarning

animation-duration:
animation-timing-function:	linear \| ease \| ease-in \| ease-out \| ease-in-out \| cubic-bezier(n,n,n,n)
animation-delay:
animation-iteration-count:	infinite \| Number:
animation-direction:	normal alternate
animation-play-state:	pausedrunning
animation-fill-mode:	none forwards (Last keyframe) backwards (First Keyframe) both (specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

3. Transition

:hover,:focus,:active,:checked or JavaScript trigger

CSS transitions allows you to change property values smoothly, over a given duration.

transition-duration
transition-timing-function	linear \| ease \| ease-in \| ease-out \| ease-in-out \| cubic-bezier(n,n,n,n)
transition-delay

4. Transform

translate(px,px)

scale(,)

rotateX({{ transform_rX }}deg)

rotateY({{ transform_rY }}deg)

rotateZ({{ transform_rZ }}deg)

skew(deg,deg)

transform-origin: center center(Default) 0 0 right bottom

backface-visibility: visible(Default) hidden

5. background-clip

border-box padding-box content-box initial

蝙蝠侠（Batman）是DC漫画公司旗下的超级英雄，1939年5月于《侦探漫画》第27期首次登场，是漫画史上第一位没有超能力的超级英雄。他本名布鲁斯·韦恩（Bruce Wayne），是高谭市首富韦恩家族的独子。布鲁斯在儿时亲眼目睹父母被犯罪分子杀害，他发誓要扫除罪恶，不让别的孩子也遭受这样的命运。为此他遍访名师，掌握了各种侦探知识和战斗技巧，并依靠韦恩集团制造了大量高科技装备，开始了他的圣战。白天，他是别人眼中的无脑富二代、花花公子；夜晚，他是令罪犯闻风丧胆的黑暗骑士——蝙蝠侠。

6. CSS Selectors

Selectors	Type	Example
\*	Universal selector
elementname	Type selector
#idname	ID selector
.classname	Class selector
[attr] [attr=value]	Attribute selector
A B, A > B, A + B, A ~ B	Combinators selectors
selector1, selectorN	Grouping selectors
:: :	Pseudo Classes 匹配具体元素 (Pseudo Element匹配元素的特定部分不能被JS获取)	:not(:first-child) 匹配非first child element :nth-child(1) 匹配first child element :nth-last-child(2) 倒数第二个