CSS 高级使用

本文内容

1. 选择器

1. 选择器

1. 选择第几个子元素

   	p:nth-of-type{
   	}
   	p:nth-child{
   	}
   

2. 变换

1. tranform
   • translate()
   • rotate()
   • scale()
   • skew()
   • matrix()
2. transform-origin 控制转换原点

3. 过渡

1. transition-property
2. transition-duration
3. transition-timing-function
   • linear
   • ease
   • ease-in
   • ease-out
   • ease-in-out
   • cubic-bezier(n,n,n)
4. transition-delay
5. transition: property duration timing-function delay; 简写方式

4. 鼠标交互

1. hover 覆盖
   • p:hover span{color: red;}
   • 表示p上有鼠标时，span字体颜色变为 red
   • p:hover + span 表示p后面一个span
   • p:hover ~ span 表示p 后面的span，不一定需要 临近 p标签

5. 圆角

1. 单属性
   • border-radius: 2px
2. 双属性
   • border-radius: 左上与右下 右上与左下
3. 三属性
   • border-radius: 左上 右上与左下 右下
4. 四属性
   • border-radius: 左上 右上 右下 左下
5. border radius 可以设置 百分比

6. 动画

1. animation
   1. 创建动画

      	@keyframes xxx{
      			from {}
      			to {}
      	}
      

   2. 绑定选择器

      	div {
      		animation: xxx;
          }