web前端11--伪类与过渡

1、状态伪类选择器

选择元素在不同状态下的样式

• :hover 当鼠标悬停在元素上时（重点!!!）

```css
        div:hover{
            width: 600px;
            transform: rotate(15deg);
        }
```

- `:active`：元素被激活(鼠标按下时)的状态。

• `:focus`：元素获得焦点时。(输入框)
• `:checked`：(单选/多选)被勾选状态。

2、过渡

transition属性 使对象变化 能渐变效果

transition-duration 过渡持续时间 （常用！）
transition-delay 指过渡开始前的延迟（了解就好）
transition-property 指定要过渡的css属性 all全部

transition-timing-function 过渡期间的速度变化

• `ease`（默认值）：在开始时加速，中间过程缓慢，结束时再次加速。
• `linear`：过渡或动画在整个过程中保持匀速。
• `ease-in`：在过渡或动画开始时慢慢加速，后期保持匀速。开始时比默认的`ease`更慢。
• `ease-out`：在过渡或动画开始时保持匀速，结束时慢慢减速。结束时比默认的`ease`更慢。
  简便方法：一起写
  transition: 1s 2s linear;

 ## 结构伪类选择器 
//根据在文档结构中的位置 或关系来选择元素的一类伪类
``` css
div p:first-child{
<!-- 选择div下的第一个p元素 -->
}
div p:last-child{
<!-- 选择div下的最后一个p元素 -->
}
div p:nth-child(n){
<!-- 选择div下的第n个p元素 -->
}
div p:nth-last-child(n){
<!-- 选择div下的倒数第n个p元素 -->
}

div p:nth-of-type(3) {
    /* 选择每个父元素下的第三个p类型的元素 */
}

p:nth-last-of-type(2) {
    /* 选择每个父元素下的倒数第2个p类型的元素 */
}

:not(xx) {
    /* 选择除了xx之外的所有元素。 */
}
```

3、伪元素

插入一些额外的内容 伪元素通常以::开头

p::after{
            content: '你好';
        }
p::before{
            content: 'hello';
        }

4、溢出隐藏

overflow: hidden;

5、应用实例

1、卡牌

2、手风琴特效