一、css3新增background-clip 属性
1.设置背景色:background-color
2.设置背景图片:background-image
3.设置背景图片重复:background-repeat
4.置背景图像是否固定或者随着页面的其余部分滚动:background-attachment
5.设置背景图片的位置background-position
6.background-size: auto || <length> || <percentage> || cover || contain
7.background-clip:border-box || padding-box || content-box(新增属性:)
.text {
font-size: 40px;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
二、css3的Filter
filter: none | <filter-function > [ <filter-function> ]*
grayscale灰度
sepia褐色(求专业指点翻译)
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
三、css3制作动画的几个属性
变形(transform)
transform: rotate | scale | skew | translate |matrix;
1.rotate
2D(2D旋转)
未定义transform-origin,则以元素中心点为旋转基点
transform:rotate(30deg) 顺时针30度
transform:rotate(-30deg) 逆时针30度
3D(3D旋转)
rotateX(a)、rotateY(a)、rotateZ(a)
a指的是旋转的角度,可正直可负值
rotate3d(x,y,z,a)
x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。
-webkit-transform:rotateX(45deg);
-webkit-transform:rotateY(45deg);
-webkit-transform:rotateZ(45deg);
-webkit-transform:rotate3d(0.6,1,0.6,45deg);
2.scale
2D scale(2D缩放)
scale(X,Y)是用于对元素进行缩放,transform:scale(2,1.5);如果Y未设置,则与X的默认相同。
3D scale(3D缩放)
scale3d(sx,sy,sz)
sx:横向缩放比例;
sy:纵向缩放比例;
sz:Z轴缩放比例;
scaleZ(s)
s:指定元素每个点在Z轴的比例。
scaleZ()和scale3d()函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果
-webkit-transform: scaleZ(5) rotateX(45deg);
3.skew
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形),skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
transform:skew(30deg,10deg)
4.translate
2D translate 位移
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);
translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)
3D translate 位移
translate3d(tx,ty,tz)
tx:代表横向坐标位移向量的长度;
ty:代表纵向坐标位移向量的长度;
tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。
当z轴值越大时,元素也离观看者更近,从视觉上元素就变得更大;反之其值越小时,元素也离观看者更远,从视觉上元素就变得更小。
-webkit-transform: translate3d(30px,30px,200px);
translateZ(t)
t:指的是Z轴的向量位移长度。
-webkit-transform: translateZ(200px);
过渡(transition)
transition :
<'transition-property'>
<‘transition-duration'>
<‘transition-timing-function'>
<'transition-delay'>
1.transition-property
当元素其中一个属性改变时执行transition效果
color,length,percentage,inerger,number,transform,rectangle,visibility,shadow,gradient,paint server (SVG),space-separated list of above,a shorthand property
2.transition-duration
transition-duration是用来指定元素 转换过程的持续时间
3.transition-timing-function
ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>
cubic-bezier(n,n,n,n)贝塞尔曲线 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
4.transition-delay
transition-delay是用来指定一个动画开始执行的时间
动画(animation)
-webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 10s;/*动画持续时间*/
-webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/
-webkit-animation-delay: 2s;/*动画延迟时间*/
-webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/
-webkit-animation-direction: alternate