2021-04-05

3.29 列表

有序列表

祖先元素 ol li子元素

（默认）li元素前面自动添加有序的数字或者字母

1. Lorem ipsum dolor sit amet.

#### 无序列表 ul（unorder list）

祖先元素 ul li子元素

（默认）li元素前面自动添加小圆点
无序列表去除小圆点*/使用padding后将不占尺寸

padding: 0;（去除子盒子）

## 2

换样式 (设置次盒子内容为图片)*/去除有序无序列表的样式 子盒子依旧占有尺寸

list-style-image: url("");

## 3

list-style-type设置列表样式 

   square 实心正方形

   circle 空心圆

list-style-type: square;（实心正方形）

list-style-type: circle;（空心圆）

## 4

/* 设置有序列表样式 */

ol>li{

  list-style-type: upper-alpha;（大写字母）

  list-style-type: lower-alpha;（小写字母）
  
  list-style-type:lower-roman; （罗马数字小写）
   
  list-style-type:upper-roman;  （罗马大写）

}


**定义列表 dl （ defined list）**

祖先元素 dl   dt dd子元素

全额付的人

容器人确认人

```

dd是对dt的描述

全额付的人

​ 容器人确认人

盒子阴影

第一个值 X轴偏移量

第二个值 Y轴偏移量

第三个值 模糊值

boxshadow: 10px 8px 5px red；

文本阴影

text-shadow: 10px 8px 5px red;

3.30 伪元素选择器

first-line
设置第一行的样式

格式；元素::first-line（）声明块
header::first-line{
color: red;
}

first-letter
控制第一个字符的字体样式（大小 颜色）

格式；元素::first-letter（）声明块 */

header::first-letter{
  font-size: 26px;
  color: aquamarine;
}

**设置选取页面内容的样式
#### 格式 ::selection {声明块}**

注；仅限于 background-color:和color:

header::selection{

background-color: rgba(255,0,0,0.5);

color: aquamarine;

}

属性选择器

第一种

格式 元素 [属性名=“属性值”]

input[type=“text”]

第二种 属性值开头用

input[type ^=“te”]

第三种 属性值结束

input[type $=“t”]

第四种 包含属性值

格式

元素名称【属性名~=属性值】

nav[class~=“box1”]

文本

/* 字间距 */ letter-spacing:

letter-spacing: 5px;

####   /* 添加下划线 */ text-decoration:

text-decoration: underline;

####   /* 上划线 */ text-decoration

text-decoration: overline;

####   /* 贯穿线 */  text-decoration:

text-decoration: line-through;

####  文本阴影 text-shadow:

  第一个值 X轴偏移量

  第二个值 Y轴偏移量

  第三个值 模糊值 */

text-shadow: 10px 8px 5px red;

#### 首行缩进 text-indent:

text-indent: 30px;

#### text-transform 

lowercase 小写字母

uppercase 大写字母

capitalize 单词首字母大写

text-transform: capitalize;


=================================================================
3.31 动画

### 简单动画通常称之为“过度”transition

css属性，在一定时间内，从一个值变化到另一个值。（也可以是多个值）


过度那些属性
transition-property: background-color,height;
过度时间
  transition-duration: 1000ms;

简写 all（所有） ；liner（线性渐变）

transition: all linear 1000ms;  

transition-property使用范围 可以过度的属性

颜色 、尺寸、 透明度、 距离

过度效果延迟出现

transition-delay:500ms

transition-duration: 过渡时间

property 可以过度的属性

clelay 延迟时间

duration

linear’ 匀速

infinite 无限次（正无穷）

text-indent

unorder

过渡方式

transition-timing-function: linear;(匀速过度)

transition-timing-function: ease-in;（由慢到快）

transition-timing-function: ease-out;（由快到慢）

transition-timing-function: ease-in-out;（先快后慢）

复杂动画

@keyframes

第一步 定义动画

格式:@keyframes加上 动画名称

动画效果 :百分比%{声明块}（注:百分比是声明块动画的时间）

第一条是动画的起始效果

最后一条是动画的结束效果

如果起始效果和结束效果相同，可以省略结束效果代码

 form {
​    left: 0;
​    background-color: red;   （form起始样式）
  }
  40% 
​    left: 100px;
​    background-color: rgb(34, 216, 27);
  }
  80% {
​    left: 50px;
​    background-color: rgb(27, 63, 226);
  }
  to {
​    left: 0;
​    background-color: red;
  }
}

/第二步

引用动画 animated

书写格式:animation: 动画名称 动画时间 动画播放次数

animation: aside 3s 2;

=========================================================

4.1 变形 transform

通过变形可以改变盒子的视觉模型

变形不会改变盒子的原本位置和尺寸，因此不会对其他元素造成影响

一 旋转 transform: rotate（）

默认值Z轴旋转

格式：transform: rotate

取值

rotate

注：括号里给正值顺时针旋转 给负值逆时针旋转

  transform: rotate(45deg);

上下旋转

transform: rotateX(180deg);

左右旋转

transform: rotateY(180deg);

设置旋转中心点

第一个值X轴第二个值Y轴

*/

transform-origin: 50% 25%;

二 缩放 transition: all linear 0.5s;

旋转加缩放简写 transform: scale(2) rotate(45deg); 空格隔开

transition: all linear 0.5s;

缩放 scale

格式 transform: scale(0.5);

括号里值大于一放大小于一缩小

transform: scale(0.5);

三 倾斜 skew

倾斜 skew

格式 transform: skew(角度);

正值左倾斜 负值右倾斜

transform: skew(-20deg);

偏移量 transform: translate();

格式:transform: translate(X轴

偏移量 transform: translate();

格式:transform: translate(X轴偏移量 ,Y轴偏移量);

transform: translate(20px ,20px);