一、过渡属性 transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值
过渡属性需要触发事件,如:hover(鼠标划过事件)
1. transition-property:检索或设置对象中的参与过渡的属性
说明:属性值可以单独设置否个属性,也可以设置多个属性 width,height; 还可以设置为all(默认值)代表所有属性
2. transition-duration:检索或设置对象过渡的持续时间
说明:设置过度时间(s, ms) 1s = 1000ms
3. transition-delay:检索或设置对象延迟过渡的时间
说明:设置延迟过度时间(s, ms) 属性值为正值的时候是延迟执行过渡效果,为负值的时候是提前只想过渡效果;
4. transition-timing-function:检索或设置对象中过渡的动画类型
说明:
linear 匀速
ease(默认值) 逐渐慢下来
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
贝塞尔曲线网址:cubic-
复合式写法:transition:all 2s 1s linear ;
transition: 2s linear 1s all ;
说明:当使用复合式写法的时候,过度时间和延迟时间的顺序是不能互换的,第一个值代表过度时间,第二个值代表延迟时间;
注:哪个元素发生变形,就把过渡属性添加给谁; 建议写给元素初始的效果里;
二、2D transform
transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能,比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。
2D功能函数:
1、2D位移 translate()
说明:translate(tx) 当参数设置一个值的时候,代表水平方向的位移;
translate(tx,ty) 第一个值代表水平方向的距离,第二个值 垂直方向的距离;
translate(tx,ty, tz) 第一个值代表水平方向的距离,第二个值 垂直方向的距离.第三个值 沿Z轴移动(3D)
translateX(tx) 指定方向设置位移 沿X轴移动
translateY(ty) 指定方向设置位移 沿Y轴移动
translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D)
当属性值为正值时 代表的是向右或者向下移动,当为负值的时候 代表 向左或向上移动
说明:属性值可以用px 也可以用%(百分比大小的参照物是元素的宽高)
说明:translate()位移的效果和定位里的relative的效果是类似的,都是在当前位置进行位移的,对其元素的布局是没有影响的,原来的位置的保留的。
2、2D缩放scale()
说明: 属性值代表的是倍数,是不用加单位; 0——1 之间是 缩小的效果, 大于1的时候都是放大效果;
默认值 是 1;
scale( 值1 ) 代表水平和垂直都放大或者缩小
scale( 值1,值2 ) 值1: 水平方向的缩放大小 值2 :垂直方向
属性值可以设置为负值,但是很少用;
scaleX(值) 水平方向的缩放比例
scaleY(值) 垂直方向的缩放比例
scaleZ(值) Z轴方向的缩放比例 (3D)
3、2D旋转让rotate()
说明: 属性值的单位是度(deg)
rotate() 沿着中心点旋转; 只能放一个属性值 ,正值:顺时针旋转; 负值: 逆时针旋转;
rotateX() 沿X轴旋转
rotateY() 沿Y轴旋转
rotateZ() 沿Z轴旋转 (3D)
4、2D倾斜 skew()
说明:属性值的单位是度(deg) ;属性值为正值:向左 或向上倾斜 负值:向右或向下倾斜
skew( 值1 ) 一个值的时候 代表 沿X轴倾斜
skew( 值1,值2) 值1: 沿X轴的倾斜 值2 :沿Y轴的倾斜
skewX() 沿X轴的倾斜
skewY() 沿Y轴的倾斜
说明:元素通过 transform进行变形时,都是对其他元素的布局不产生影响的。不脱离文档流。
变形时元素默认情况下都是沿着元素的中心点去变形的
当使用复合式写法的时候,他们顺讯不同,会导致结果不一样,他们执行的顺讯是从后向前解析的。
transform: translate(100px) rotate(60deg);
5、原点设置属性:transform-origin
定义:transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用;
说明:transform-origin:值1 值2 ; 值1: 水平 值2: 垂直
px % left top right bottom ;
6、backface-visibility :隐藏被旋转的 div 元素的背面
backface-visibility:visible;可见 (默认值)
backface-visibility:hidden;不可见
backface-visibility 的bug : 如果元素翻转后结束后显示在上一层,给他加一个背景色就可以解决了。
三、css3 渐变
概念:CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
线性渐变:
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
说明:
direction:默认为to bottom,即从上向下的渐变;
还可以设置为度数。自上向右 (0度 —— 90度的变化) -- 旧的标准是相反 自右而上 ( 90—— 0)
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
径向渐变:
语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
position:渐变起点的位置,可以为百分比,默认是图形的正中心。
shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。
size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。