CSS渐变、过渡、转换、动画

CSS渐变：CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变；（Linear-Gradients）

默认从上到下   从左到右（{ background-image: linear-gradient(to right,red,yellow); }）

径向渐变(由中心向外辐射状渐变)；（radial-gradient）

颜色结点不均匀分布

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

设置形状：shape：cilcle 或 ellipse(椭圆  默认)

background-image: radial-gradient(circle, red, yellow, green);

 

 

CSS过渡：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

transition-property: width; （应用过渡的属性名  全部用 all）

transition-duration: 1s;  （定义过渡效果花费的时间）

transition-timing-function: linear;   （规定过渡效果的时间曲线。）

transition-delay: 2s; （规定过渡效果何时开始。）

transform-origin:right top;  (设置旋转轴心)

transition: 属性名, 时间 ,时间曲线 ,何时开始；

 

CSS 2D转换：

transfrom:translate(X轴，Y轴);(平移)

transfrom:roate(90deg);  顺时针旋转可以负值

transfrom:scale(宽（倍数可以是小数），高);扩大

transfrom:skewX();表示在X轴倾斜

transfrom:skewY();表示在Y轴倾斜

 

3D转换：2D基础上加上Y轴

 

CSS动画：

要定义动画

@keyframes 动画名{}

animation-name: myfirst;  动画名

animation-duration: 5s;  完成动画时间

animation-timing-function: linear;  速度曲线

animation-delay: 2s;  从什么时候开始

animation-iteration-count: infinite;  播放次数  infinite循环

animation-direction: alternate;  规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-play-state: state;  规定动画是否正在运行或暂停。默认是 "running"。

 

CSS多列布局：CSS3 可以将文本内容设计成像报纸一样的多列布局

column-count:3;指定元素被分割的列数

column-fill:;如何填充列

column-gap:;指定列的间隙

column-rule-color 列间边框颜色

column-rule-style 列间边框样式

column-rule-width 列间边框厚度