假期重点复习

## 滤镜filter

filter: blur($px); blur模糊处理 数值越大越模糊

## 过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

多个属性用逗号隔开(transition:width .4s,height .5s;)，也可以写成 transition： all .5s;

注: 花费时间与何时开始后面必须家单位 s  ;

    该属性谁做过渡给谁加

***

div{

    width:200px;

    height:100px;

    transition:width .5s  1s, height .5s 1s;

}

div::hover{

    width:400px;

    height:200px;

}

***

# 动画

制作动画步骤:

1. 先定义动画

2. 在使用(调用)动画

它比过渡样式更多。可以不用鼠标经过也可以变化

## 用keyframes(关键帧)定义动画(类似于定义类选择器)

注意:  1.可以定义多次动画

      2.里面的百分比为整数

      3. 里面的百分比即为 总时间 的划分

### 格式

***

@keyframes 动画名称{

    0%{

        width1:00px;

    }

    100%{

        width:200px;

    }

}

***

<!-- 调用动画 -->

div{

    <!-- 调用动画 -->

    animation-name: 动画名称;

    <!-- 持续时间 -->

    animation-duration:持续时间(单位为 s );

}

### 动画序列

1. 0%是动画开始，100%是动画完成。这样的规则就是动画序列

2. 在@keyframes中规定某项CSS样式，就能创建当前样式逐渐改变为新样式的动画效果

3. 可以改变任意多的样式任意次数

4. 用百分比的形式来规定变化发生的时间，或用关键词"from"和"to",等同于0%和100%

 

### 多次调用

@keyframes 动画名称{

    0%{

        translate();

    }

     25%{

        translate();

    }

      50%{

        translate();

    }

      75%{

        translate();

    }

      100%{

        translate();

    }

}

## 动画属性

规定动画名称

animation-name: 动画名称;   (必须写)

规定持续时间

animation-duration:持续时间; (必须写)

规定运动曲线

animation-timing-function:ease(默认值);

属性值:

linear: 动画从头到尾速度是相同的，匀速

ease: 动画以低俗开始，然后加快，在结束时前变慢

ease-in:动画以低速开始

ease-out: 动画以低速结束

ease-in-out:动画以低速开始结束

重点关注:    steps():指定了时间函数中的时间数量(步长)   效果是一步一步走

 

规定开始时间  delay(延迟)

animation-delay:1s;

规定重复次数   iteration(重复的)

animtion-iteration-count:1;(默认1次)   infinite(无限)

规定是否在下一周期逆向播放  direction(方向)

animation-direction:normal(默认);   alternate(逆播放)

规定动画结束后状态， forwards(保持) backwards(回到起始)(默认)

animation-fill-mode:forwards;

规定动画是否正在运行或暂停 running(运行)(默认)  paused(暂停)

animation-play-state: paused;

## 动画简写属性 顺序只对两个时间有一定要求  不包括animation-play-state

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束状态

 

重点: 元素可以添加多个动画，之间用逗号隔开

例如: animation:bear 5s,fox 2s;

# 2D转换

2D转换是改变标签在二维平面上的位置与形状的一种技术

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

转换 可以简单理解为变形

移动:translate   旋转:rotate   缩放:scale

## 二维坐标系

水平向右为X轴，垂直向下为Y轴

## 2D移动 translate  

2D移动是2D转换的一种功能，可改变元素在页面中的位置，类似于定位

### 语法

transform:translate(x,y);

或者分开写:

transform:translateX(n);

transform:translateY(n);

注:分开写里边的X Y要大写  单位一般为px

 

### 重点

1. translate最大优点是:不会影响到其他元素位置(他还占有原先位置)

2. 如果translate里边的参数若为百分数，移动的距离为 盒子自身 的宽度或高度来对比的

3. translate对于行盒无效 (块盒及行块盒有效)

 

## 2D旋转

### 语法

transform:rotate(度数);

### 重点

1. rotate里面跟度数，单位是deg.比如rotate(45deg)

2. 角度为正时，顺时针旋转，为负，逆时针旋转

3. 默认旋转中心为元素的中心点

***重点*** 旋转过后会改变坐标轴

 

## 转换中心点  transform-origin

### 语法

transform-origin:x y;

### 重点

1. 后面的参数x和y使用空格隔开

2. 默认转换中心为元素的中心点 (50% 50%)

3. 还可以给x y 设置像素 或者 方位名词 (top right bottom lift center)

## 2D缩放

### 语法

transform: scale(x,y);

### 重点

1. 参数里面是数字，不跟单位， 数字表示为原本倍数

2. 等比例缩放(即宽高缩放相同比例)有特殊写法，例如:

    transform：scale(2);

3. 可以缩小 参数要小于1

    transform:scale(0.5,0.5);

4. scale相比于width height 的优势: 不会影响其他盒子 而且可以设置缩放中心

## 2D转换的综合性写法

注意: 1. 同时使用多个转换，其格式为: transform:translate() rotate() scale() 等

      2. 其顺序会影响转换的效果 (先旋转会改变坐标轴方向)

      3. 当我们同时有位移和其他属性的时候，记得将位移放在最前面

# 3D转换

## 三维坐标系

立方体的旋转中心为体心，以此建立三维坐标系，非人为设置不会改变

x轴:水平向右  注意:水平向右为正值

y轴:垂直向下  注意:下面为正值

z轴:垂直屏幕  注意:垂直屏幕往外面为正值，往里面为负值

## 3D位移

translateX(100px);

translateY(100px);

translateZ(100px);    (注意:translateZ一般以px为单位)

复合写法:

translate3d(x,y,z);   (此时的x y z是不能省略的 ，没有就写0)

注意:transform:translateX(100px);

     transform:translateY(100px);

    此时只有Y轴有效

 

## 3D旋转 rotate3d

3D旋转指可将物体沿着x y z轴或者自定义轴旋转

### 语法

transform:rotateX(45deg):沿X轴正方向旋转45度

transform:rotateY(45deg):沿Y轴正方向旋转45度

transform:rotateZ(45deg):沿Z轴正方向旋转45度

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度(了解即可)

 

判断旋转方向  左手准则:

大拇指指向轴的正方向，其他手指弯曲方向为正值时的旋转方向

例如:x y z轴的值可以为任何值

transform:rotate3d(1,1,0,45deg)

x y z表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转角度

## 透视  perspective  近大远小 只能确保亲子元素开启立体空间

如果想要在网页中实现3D效果图，我们就需要透视

透视我们也称为视距:视距就是人的眼睛到屏幕的距离

视距越小，成像越大，视距越大，成像越小

透视的单位是像素

重点:透视写在被观察元素的父盒子上面的，加在祖先元素上也可以(有的可能不支持继承)

perspective，视距，视距就是一个距离人的眼睛到屏幕的距离，视距越小，成像越大，视距越大，成像越小

translateZ，表示物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大

以上两个属性都可以改变成像大小

## 3D呈现  transform-style  为子元素开启立体空间

1. 控制子元素是否开启3D空间

2. transform-style:flat;子元素不开启立体空间 (默认的)

3. transform-style:preserve-3d; 子元素开启立体空间  (preserve:保留)

4. 代码写给父级，但影响的是子盒子

5. 这个属性很重要

自己总结:后辈元素必须同时拥有transform-style以及perspective下可以实现3D效果

# 背景渐变linear-gradient

## 语法

background: linear-gradient(起始方向、颜色1、颜色2、···)

background: -webkit-linear-gradient(left、red、blue、···)

background: -webkit-linear-gradient(left top、red、blue、···)

注意: 其实方向可以是:方位名词 或者 度数，如果省略默认就是top

创建背景渐变同样可以通过CSS来实现，使用linear-gradient或者radial-gradient属性。这两者分别用于线性渐变和径向渐变。

线性渐变（linear-gradient）：

css

.gradient-bg {

  background: linear-gradient(to right, #ff0000, #00ff00);

}

这个例子中，to right表示渐变方向是从左到右，#ff0000是起始颜色（红色），#00ff00是结束颜色（绿色）。你可以根据需要调整渐变的方向和颜色。

径向渐变（radial-gradient）：

css

.gradient-bg {

  background: radial-gradient(circle, #ff0000, #00ff00);

}

在这个例子中，circle表示渐变形状是一个圆形，#ff0000是起始颜色，#00ff00是结束颜色。你可以调整形状、起始(圆心)和结束颜色。

多色渐变：

你还可以使用多个颜色实现更复杂的渐变效果：

css

.gradient-bg {

  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);

}

这会创建一个从红色到绿色再到蓝色的线性渐变。

角度渐变：

css

.gradient-bg {

  background: linear-gradient(45deg, #ff0000, #00ff00);

}

这个例子中，45deg表示渐变的方向是从45度的角度开始。

# 粘性定位

position: sticky;

粘性定位特点:

1. 以浏览器的可视窗口为参照点移动元素

2. 粘性定位占有原先位置

3. 必须添加top、left、right、bottom其中一个才会有效，否则以相对定位形式

# 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow: 必需，水平阴影的位置，允许为负值

v-shadow: 必需，垂直阴影的位置，允许为负值

blur: 可选，模糊距离

spread:可选，阴影的尺寸

color: 可选，阴影的颜色

inset: 可选，将外部阴影(outset)改为内部阴影(inset)   (默认为外部阴影，但不能书写outset)

 

注:盒子阴影是不占用空间的

# 文字阴影

text-shadow:h-shadow v-shadow blur color;