2023 11.30笔记

1. iconfont（可以选中改font-size和color）
   <link rel="stylesheet" href="../">  在head之间引入
   <button><i class="iconfont icon-sousuo"></i></button>  在body之间
   
2. css样式的继承：
   会继承的属性：字体属性、文本属性、文字颜色等
   不会继承：宽高、内外边距、嵌套的a链接等

3. transition-property: width height;  想要过渡的属性
   transition-duration: 3s;  过渡的时间
   transition-delay: 2s;  过几秒再过渡
   transition-timing-function: steps(40);  过渡速度（帧率），linear（匀速）
   transition: all 3s;  所有属性

4. div {
            width: 300px;
            height: 50px;
            background-color: pink;、
            animation-name: yz;
            animation-duration: 3s;
            animation-iteration-count: infinite;  次数（无限）
            animation-direction: alternate-reverse;  反转效果
            animation: yz 3s infinite alternate;  简写
       }
    @keyframes yz {  
           from {
                width: 300px;
                height: 50px;
                background-color: pink;
                }

            to {
                width: 600px;
                height: 300px;
                background-color: red;
               } 

            0% {
                width: 300px;
                height: 50px;
                background-color: pink;
                transform: rotate(45deg);
               }

            100% {
                width: 1200px;
                height: 300px;
                background-color: red;
                transform: rotate(345deg);
                }
                    }

5. 2d转换：（配合relative和absolute）
   以下都是给son（absolute）
   transform: translateX(100px);  移动
   transform: translateY(100px);
   transform: translate(100px, 100px);

   transform: rotateX(45deg);  旋转
   transform: rotateY(45deg);
   transform: translateX(100px) rotateX(45deg); 先移动后旋转

   transform: scaleX(0.5);  扩大和缩放
   transform: scaleY(0.5); 
   transform: scale(0.2);

   transform: skewX(45deg);  扭曲

6. 3d转换：（配合relative和absolute）

   给father（relative）
   transform-style: preserve-3d;
   perspective: 800px;

   给son（absolute）
   transform: translateZ(100px);
   transform: rotateZ(45deg);
   transform-origin: bottom;  以底为轴旋转（top px bottom）

7. text-shadow: 2px 2px 2px rgb(243, 8, 47);  文字阴影
                 X轴 Y轴 虚化 颜色
   box-shadow: 2px 2px 8px pink;  盒子阴影

8. 媒体查询

9. 渐变：
   background-image: linear-gradient(pink, green);

10.多列：（报纸）
    p {
        column-count: 2;  2列
        column-gap: 400px;  间隙
      }

11. 会旋转的盒子（见12代码）