css3动画

---

2D,3D转换方法

1. translate（）向x,y轴移动

transform: translate(100px,100px);

2. rotate（）旋转180度

transform: rotate(180deg);

3. scale（）缩放效果 调整宽高的倍数

transform: scale(0.5,2);

4. skew（）倾斜x,y轴倾斜的角度

transform: skew(10deg,10deg);

5. matrix（）六个参数对应矩阵
6. rotateX（）3d转换中的绕x旋转

transform: rotateX(120deg);

7. rotateY（）

---

过渡

1. transition有四个属性,当鼠标移上去执行效果宽高均从100px变为200px 并旋转360度，所需时间均为两秒

div{
    width: 100px;
    height: 100px;
    background-color: darksalmon;
    transition: width 2s,height 2s,transform 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
}

2. transition-property过渡的名称
3. transition-duration过渡效果花费的时间
4. transition-timing-function过渡效果的时间曲线
5. transition-delay过渡效果的开始时间 动画效果延时两秒执行

transition-delay: 2s;

---

动画效果与多列

1. 该区域的效果 在不同时段变色并向不同坐标移动

position: relative;
animation: animi 5s;

@keyframes  animi{
    0%{
        background: red;
        left: 0px;
        top: 0px
    }
    25%{
        background: blue;
        left: 200px;
        top: 0px
    }
    50%{
        background: green;
        left: 200px;
        top: 200px
    }
    75%{
        background: saddlebrown;
        left: 0px;
        top: 200px
    }
    100%{
        background:red;
        left: 0px;
        top: 0px
    }
}

2. 使用多列，自动适配4列

 column-count: 4;
 column-gap: 30px;
 column-rule: 5px outset red;

---

对齐

1. 居中

margin-left: auto;
margin-right: auto;

margin: 0px auto;

2. 居右

position: absolute;
right: 0px;

3. 居左

float: left;

---

---

css3选择器详解

1. 通配符，所有未指定的标签都使用通配符规定的样式

*{
}

2. 类选择器结合元素使用,当class取相同值时，可以通过标签区分

a.div{
color: red;
}

3. 多类选择器,同时拥有3种效果

<p class="p1 p2"> a</p>

.p1.p2{
    font-style: italic;
}

4. Id选择器与类选择器的区别,Id只能在文档中使用一次（不能使用重复命名），而类可以多次使用,ID选择器不能结合使用,当使用js是，需要用id
5. 属性选择器,选择有特定属性值的元素或根据部分属性匹配,只要含有此关键字都可以获得效果

[title~="title"]{
    font-size: 50px;
}

<p title="title">h</p>
<p title="title a">h</p>

6. 后代选择器 速度较快 可以直接查找多代关系（p strong i可以直接写为 p i）

p strong{
    color: aqua;
}

7. 子元素选择器，一次只能查找一级关系

p>strong{
    color: aqua;
}

8. 相邻兄弟选择器,可选择紧接着另一个元素后的元素，且二者有相同父元素，第二个第三个li标签有特殊效果

<li>a</li>
<li>b</li>
<li>c</li>

li+li{
    color: red;
    font-size: 40px;
}

---

其他

1. 设置行间距

line-height: 200%;

2. 改变鼠标指示样式

p{
    cursor: alias;
}

3. 改变列表效果,此为变成一行

li{
    display: inline;
}

4. 设置元素是否可见，不可见

visibility: hidden;

5. 去掉无序列表前的效果

list-style-type: none;

6. opacity图片透明度，此为图片完全透明 （值0~1）

opacity:0

---