CSS3 渐变
线性渐变（Linear Gradient）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradient）- 由它们的中心定义
repeating-linear-gradient() 函数用于重复线性渐变
线性渐变 （默认从上向下）
background: linear-gradient(red, blue);基本的渐变，默认从上向下background: linear-gradient(to right, red , blue);从左向右的渐变background: linear-gradient(to bottom right, red , blue);从左上角到右下角/background: linear-gradient(180deg, red, blue);带有指定角度的渐变background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));使用透明色渐变
transparent 透明色
百分比渐变:
- 渐变过渡区的占比为总的空间（高度或宽度）减去上下两个着色块空间占比剩下的空间。
background:linear-gradient(red,orange) - 如果前面有比当前的颜色值百分比大的，会自动将当前颜色值的百分比设置为前面颜色中的最大百分比值
例：background:linear-gradient(red 0%, red 14.3%, orange 0, orange 28.6%, yellow 0, yellow 42.9%, green 0, green 57.2%, blue 0, blue 71.5%, indigo 0, indigo 85.8%, violet 0, violet 100% );background:linear-gradient( red 0%, orange 16.67%, yellow 33.33%, green 50%, blue 66.67%, indigo 83.33%, violet 100% );
重复的线性渐变background: repeating-linear-gradient(red,yellow 10%, green 20%);
径向渐变
background: radial-gradient(red, green, blue);颜色结点均匀分布的径向渐变：background: radial-gradient(red 5%, green 15%, blue 60%);颜色节点分布不均匀background: repeating-radial-gradient(red, yellow 10%, green 15%);重复的径向渐变
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
形状为圆形的径向渐变：
background: radial-gradient(circle, red, yellow, green);
CSS3 变形(2D 转换)
css3 中 transform 可以实现文字或图像的旋转（rotate）、缩放(scale)、倾斜(skew)、移动(translate)的变形效果。
旋转、缩放、倾斜和移动，这四种变形效果进行结合使用，并且使用的先后顺序不同，页面显示的结果会有区别。
使用语法：
1 | transform:功能; |
- 移动
translateX(n) translateY(n) 沿着 X 或 Y 轴移动元素。
translate(x,y) 沿着 X 和 Y 轴移动元素。
实例：
1 | /*值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。*/ |
- 缩放
scaleX(n) scaleY(n) 改变元素的宽或高度。
scale(x,y) 改变元素的宽度和高度。
实例：
1 | /*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。*/ |
- 定义 2D 旋转
rotate(angle)
在参数中规定角度。turn 是圈，1turn = 360deg；另外还有弧度 rad，2πrad = 1turn = 360deg。如，transform:rotate(2turn);旋转两圈
实例：
1 | /*值 rotate(30deg) 把元素顺时针旋转 30 度。*/ |
关于旋转 rotate；改变旋转中心点：transform-origin: left top
- 倾斜
skewX(angle) skewY(angle) 沿着 X 或 Y 轴倾斜。
skew(x-angle,y-angle) 沿着 X 和 Y 轴倾斜。
实例：
1 | /*值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。*/ |
CSS3 过渡
transition 属性的使用方法：
1 | transition:语法; |
css3 中 transition 允许 css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。
语法：
transition: property duration timing-function delay ;
- 执行变换的属性：
transition-property，属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）
值有三个类型：
A、none 没有属性会获得过渡效果。
B、all 所有属性都将获得过渡效果。
C、property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 - 变换延续的时间：
transition-duration；
规定完成过渡效果需要花费的时间（以秒或毫秒计），默认值 0 没有效果 - 在延续时间段，变换的速率变化 transition-timing-function；
值：
A、ease：（逐渐变慢）默认值，ease 函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
B、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
C、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
D、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
E、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
F、cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
CSS3 滤镜
Css3 里的滤镜：将图片转换成灰度图片-webkit-filter: grayscale(100%);
本文作者：人模人样的搬砖老段
本文链接：CSS 核心属性(二)
如有错误，请及时评论或者知乎私信或者 B 站私信哦~
最后更新于:2019/12/21
