CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(radial-gradient)- 它们中心定义
设置形状-shape -----circle 表示圆形,ellipse 表示椭圆形 默认值是 ellipse
添加效果CSS属性
效果持续时间
transition默认值是0。
过渡属性
transition
简写属性,用于在一个属性中设置四个过渡属性。
transition-property
规定应用过渡的 CSS 属性的名称。
transition-duration
定义过渡效果花费的时间。默认是 0。
transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。匀速linear
transition-delay
规定过渡效果何时开始。默认是 0。
transform-origin: right top 设置旋转轴心
2d转化:
translate() 平移
rotate() 旋转
scale() :scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
skew():包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能
3d转化
函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)16 个值的 4x4 矩阵。
translate3d(x,y,z) 3D 转化。
translateX(x) X 轴的值。
translateY(y) Y 轴的值。
translateZ(z) Z 轴的值。
scale3d(x,y,z) 缩放转换。
scaleX(x) X 轴的值。
scaleY(y) Y 轴的值。
scaleZ(z) Z 轴的值。
rotate3d 旋转
rotateX-- X 轴旋转
rotateY-- Y轴旋转
rotateZ- Z轴旋转
perspective(n)-定义 3D 转换元素的透视视图
@keyframes -规定动画
animation- 所有动画属性的简写属性
animation-name- @keyframes 动画的名称
animation-duration -动画完成一个周期花费的秒或毫秒
animation-timing-function -动画的速度曲线
animation-fill-mode- 当动画不播放时
animation-delay- 动画何时开始
animation-iteration-count- 动画被播放的次数
animation-direction -动画是否在下一周期逆向地播放
animation-play-state -动画是否正在运行或暂停
动画设置所有的属性:
6.CSS3多列布局
CSS3 可以将文本内容设计成像报纸一样的多列布局
CSS3 多列属性
column-count-元素应该被分割的列数。
column-fill-如何填充列
column-gap-列与列之间的间隙
column-rule-* 属性的简写
column-rule-color-两列间边框的颜色
column-rule-style-两列间边框的样式
column-rule-width-两列间边框的厚度
column-span-元素要跨越多少列
column-width-列的宽度,不要与column-count同时使用