CSS3新特性

1. 属性选择器

<style>  
  /* E[属性名] */
  button[disabled] {
    cursor: pointer;
  }

  /* E[属性名 = 值] */
  input[type=text] {
    background-color: aqua;
  }

  /* 类名以icon 开头 的元素 */
  div[class^=icon] {
    color: pink;
  }

  /* 类名以icon 结尾 的元素 */
  div[class^=icon] {
    color: greenyellow;
  }

  /* 类名 含有 icon的元素 */
  div[class*=icon] {
    color: purple;
  }
</style>

2. 结构伪类选择器

<style>
  /* 第一个子元素 */
  li:first-child { 
    background-color: aquamarine;
  }
  /* 最后一个子元素 */
  li:last-child {
    background-color: blanchedalmond;
  }
  /* 第 n 个子元素 n从0开始 */
  li:nth-child(5) {
    background-color: pink;
  }
  /* 第奇数个子元素 */
  li:nth-child(odd) {
    background-color: green;
  }
  /* 第偶数个子元素 */
  li:nth-child(even) {
    background-color: red;
  }
  /* 第一个子span元素 */
  div span:first-of-type {
    background-color: orange;
  }
</style>

3. 伪元素选择器

::before --> 在元素内部的前面插入内容

::after --> 在元素内部的后面插入内容

注：两者必须有content属性；两者会创建一个行内元素但可设置宽高；在里面设置样式

<style>
  div {
    width: 100px;
    height: 30px;
    background-color: blanchedalmond;
  }

  div::after {
    content: "hello";
    color: cyan;
    width: 100px;
    height: 50px;
  }
</style>

4. 2D转换

trandform: ...  不会影响其他元素的位置；对行内元素不生效

1. translate(x,y) 移动；translateX() 水平移动；translateY() 垂直移动

2. rotate(度数deg) 旋转 正顺负逆       

/* 鼠标移入 图片旋转 移除 结束旋转 */
<style>
img {
    width: 300px;
    height: 300px;
    padding:5px;
    border-radius: 50%;
    border: 4px solid cyan;
    transition: all 2s;
}

img:hover {
    transform: rotate(360deg);
    cursor: pointer;
}

</style>

<img src="./imgs/22.jpg" alt="">

旋转中心：   translate-origin: x y 注: x y值可为百分数、像素值、方位词

5. 动画

        1. 定义动画 @keyframes 动画名称 { 动画序列 }

@keyframes 动画名称 {
    // 动画序列
    0% { ... }
    10% { ... }
    ...
    100% { ... }

}

可以使用from to 来定义，等同于 0%和100%
        2. 元素使用动画

给元素样式设置 animation-name 和 animation-duration

动画常用属性：

animation-name	动画名称 ※
animation-duration	动画时长 ※
animation-timing-function	动画速度曲线
animation-delay	动画延迟播放时间
animation-iteration-count	动画播放次数
animation-direction	是否在下一周期逆向播放，默认normal，逆向altemate
animation-fill-mode	动画结束后状态，forward保持backward返回（默认）
animation-play-state	动画运行running或暂停pause

简写：animation: name duration timing-function delay iteration-count direction fill-mode;

/* 鼠标移入 图片旋转 移除 结束旋转 */
<style>
    img {
        width: 300px;
        height: 300px;
        padding:5px;
        border-radius: 50%;
        border: 4px solid cyan;
        transition: transform 3s ease-in-out;
    }

    img:hover {
        animation: rotate 2s linear infinite;
        cursor: pointer;
    }

    /* 定义旋转动画 */
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

<img src="./imgs/22.jpg" alt="">