CSS3渐变及2D转换
持续更新哦…
1、css3渐变
概念:
CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平
稳的过渡。以前,你必须使用图像来实现这些效果,现在通过使用
CSS3的渐变(gradients)即可实现。此外,渐变效果的元素在放大时
看起来效果更好,因为渐变(gradient)是由浏览器生成的。
css3渐变:在两个或多个颜色之间的平稳过渡渐变属性是:background-image:background:线性渐变:由一个颜色到另一个颜色的平稳过渡linear-gradient(方位,颜色1,颜色2)方位:left right top bottom deg(角度可以为负数)to left top(表示去左上进行渐变)repeating-linear-gradient()重复渐变径向渐变:颜色由一个点向四周扩散的效果background:radial-gradient(起始坐标,渐变形状,渐变大小,颜色1,颜色2)起始坐标:left right top bottom center,默认是中间渐变形状:ellipse椭圆,如果元素是正方形,也将显示正圆circle正圆渐变大小:closest-side:最近边farthest-side:最远边closest-corner:最近角fathest-corner:最远角
2、过渡(重点)
过渡:可以让css属性值在一定事件区间内平滑的过渡效果transition:过渡属性 时间 延迟时间 动画类型过渡属性:all 所有属性具体属性transition-property:过渡属性; transition-duration:过渡时间; transition-delay:延迟时间; transition-timing-function:过渡动画类型;时间,延迟时间单位为:s动画类型:linear:匀速运动ease:逐渐慢下来ease-in:加速ease-out 减速ease-in-out 先加速后减速贝塞尔曲线steps(数字) 逐帧动画
3、2D平面效果(重点)
transform:变化属性
功能函数:
位移:
translateX()
translateY()
translate(x,y)
可以为负数
缩放:
scaleX()scaleY()scale(xy)scale(x,y)注意:1 默认大小0 缩小到消失0~1 缩小大于1 放大负数则反向 transform: scale(2); transform: scaleX(1.5); transform: scaleY(2.5); transform: scale(2.5,2.5);
旋转:
rotateX()rotateY()rotate(z) transform: rotate(90deg); transform: rotateX(70deg); transform: rotateY(70deg);
问题:先旋转,后位移和先位移,后旋转,效果一样吗?
不一样,因为先旋转改变了位移的方向
transform: translate(100px) rotate(40deg);
transform: rotate(40deg) translate(100px);
倾斜
skewX()skewY()skew(x)skew(x,y) transform: skew(20deg); transform: skew(20deg,40deg); transform: skewX(30deg); transform: skewY(30deg);
变形原点
该属性只有在设置了transform属性的时候起作用
transform-origin: center bottom;所有方位名词都可以,数值,百分比也可以
来源地址:https://blog.csdn.net/qq_46372132/article/details/132503305