学习前端的第十六天

昨天打了疫苗，发现第二针确实比第一针要痛一点，不过也没啥，皮糙肉厚不怕这东西，除了屁股针，我认为是我目前经历过疼痛中最疼的。


还是说说今天的东西，今天主要还是学习新属性，3d属性还是挺有意思的。

一、渐变

1、 线性渐变，从一个方向到另一个方向

语法

值1表示方向（默认可以省略） 值2表示渐变的颜色
background-image: linear-gradient(to bottom,red, yellow); 
 	
background: linear-gradient(to bottom, red, yellow);			从上到下，默认值

background: linear-gradient(to top, red, yellow);				从下到上

background: linear-gradient(to left, red, yellow);  			从右到左

background: linear-gradient(to right, red, yellow);				从左到右


对角渐变
background: linear-gradient(to top left, red, yellow);          从右下到左上

background: linear-gradient(to top rigth, red, yellow);			从左下到右上

background: linear-gradient(to bottom left, red, yellow);		从右上到左下

background: linear-gradient(to bottom right, red, yellow);    	从左上到右下

/*deg表示度数*/
background: linear-gradient(90deg, red, yellow);


重复性线性渐变
background: repeating-linear-gradient(red 20%, blue 30%);		20%的位置为red，30%的位置为blue，然后按照这30%向下重复

径向渐变，从圆心向四周进行扩散渐变

语法

background: radial-gradient(red, yellow, black);

/*circle：圆形； ellipse：椭圆；   注意：径向渐变是椭圆还是圆要根据盒子的形状确定*/
background: radial-gradient(circle, red, yellow, black);


重复性径向渐变
background: repeating-radial-gradient(red 10%, yellow 20%, green 30%);

二、过渡属性

transition：

• css3新增的一个属性
• 具有动画效果，可以让属性从一个状态变成另一个状态，在变的过程中是动画的
• 过渡属性需要东西去触发它 例如：hover、activity、focus

属性：

过渡属性分写形式：

transition-property:			要参与过渡的属性,可以写all代表所有属性

transition-duration:			过渡需要的时间

transition-delay:				过渡延迟时间

/*linear：匀速；	ease：逐渐慢下来；	ease-in：加速；	ease-out：减速；	ease-in-out：先加速后减速*/
transition-timing-function:	设置对象中过渡的动画类型

简写：
transition:all(全部或所有)/具体属性值	运动时间s/ms 延迟时间s/ms 动画类型;

三、2D属性

1、空间概念：

• 2D空间，二维空间，平面的
• 3D空间，三维空间，立体的

2、transform：

• css3新增了一个变形属性，transform可以让咱们对元素进行位移、旋转、缩放操作
• translate 位移，元素的位置发生移动或者改变，类似于定位
• scale 缩放，放大或者缩小
• rotate 旋转

3、translate 位移

• translateX() 水平位置进行位移
• translateY() 垂直位置进行位移
• translate(值1, 值2) 值1表示水平 值2表示垂直
• 当translate只有一个值的时候表示水平（默认值）

4、scale 缩放

• scaleX() 水平缩放
• scaleY() 垂直缩放
• scale(值1, 值2) 值1表示水平缩放 值2表示垂直缩放
• 当只有一个值的时候，表示垂直和水平都进行缩放
• 规律：
  1表示不进行缩放，没有单位
  大于1表示放大
  小于1表示缩小
• 注意点：值不能为0

5、rotate 旋转

• rotateX() 围绕 X 轴旋转
• rotateY() 围绕 Y 轴旋转
• rotateZ() 围绕其 Z轴旋转，默认值。
• 注意:
  如果需要进行多个转换, 那么用空格隔开
  2D的转换模块会修改元素的坐标系, 所以旋转后平移和平移后旋转不一样

6、perspective 透视

• 透视（景深）属性：近大远小
• 注意：透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

7、origin 变形原点

• 变形原点默认是在元素自身的中间区域
• transform-origin: 值1 值2; 控制原点位置
  值1为X值，值2位Y值； （可以为 left right top bottom center 或者具体的数值）

8、skew 倾斜

• skewX() X轴倾斜
• skewY() Y轴倾斜

9、把2D空间转成3D空间

• transform-style: preserve-3d;
• transform: rotateX(00deg) rotateY(0deg);

注意：两个transform之间会进行覆盖，后面的覆盖前面的

解决方案：可以用空格隔开， 当然也可以用transform缩写形式

四、补充

bootstrap

• 内部的布局实现实际上是使用了媒体查询
• 这个网站提供了很多实际开发中需要用到的样式和动态效果，根据相关的步骤直接使用，便利了我们的开发