CSS基础（零散补充知识点）

本文链接：https://blog.csdn.net/qq_53926719/article/details/115035136

CSS基础（零散补充知识点）

文字垂直对齐
vertic-align，，常用于设置图片或者表单和文字垂直对齐，只能用于行内元素或行内块元素
在这里插入图片描述
动画
transform，可以进行旋转，平移，3D转换，还可以控制变化的时间和样式

三角制作
我们用css 边框可以模拟三角效果

实心箭头，可设置盒子为0*0，我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了。
设置旋转时存在一个问题，如果单纯设置透明，会围绕中心点转，旋转后就不在原来的位置上了，很别扭，所以这时候可以将对角边框（如需要top，就设置bottom）设为0，就可以在原来的位置进行旋转。
空心箭头，可以设置边框颜色来达到目的，再进行旋转。

还可以通过改变单个边框的大小，获取不同形状的三角形，巧妙运用。其原理就是当内容为0*0时，每个边框都是一个三角形。

HTML新增元素标签

视频
video，与img用法相似。常见属性👇
在这里插入图片描述
音频
audio，同上。

新增input类型
快速做验证表单
在这里插入图片描述
新增表单属性

CSS新增选择器

类选择器，属性选择器，伪类选择器权重为0010

属性选择器

/* 选择具有value的input属性 */
input[value]{
            ...
        }
/* 用于元素和类相同的类，选择text属性 */
input[type=text]{
           ...
        }        
/*选择class类的div且以...开头的div元素*/
div[class^="..."]{
         ...
}
/*选择class类的div且以...结尾的div元素*/
div[class$="..."]{
         ...
}
/*选择class类的div且含有...的div元素*/
div[class*="..."]{
         ...
}
<input type="text" value="nihao"> 
    <input type="password">

伪元素选择器
：：before ：：after，在css中插入新盒子，content为输出内容
在这里插入图片描述
结构伪类选择器
nth-child，nth-of-type

两者区别：

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nth-of-type 选择指定类型的元素

常见公式：
在这里插入图片描述
特别注意： 使用伪类选择器，旋转元素的兄弟元素只能是往后选的，不能是往前选。

动画序列

通过多个节点精确控制一个或一组动画，常用来实现复杂的动画效果。
相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
制作动画分两步：

定义动画

  @keyfram 动画名称{
    0%{
    }
    100%{
    }
}

0为初始状态，100为介绍状态。（from to也可以）
2. 调用动画

div{
  animation-name:动画名称；
  animation-duration:持续时间；
}

动画常用属性
在这里插入图片描述

2D转换

rotate旋转

rotate 里面跟度数，单位是 deg
角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

设置旋转的中心：transform-origin: x y;

scale放大缩小： transform: scale(x, y)

注意，x与y之间用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

3D转换

3D位移
translate3d,在2d移动的基础上多加了一个z轴移动，需要配合透视perspective才能有效果。
translate3d(x,y,z);

透视
写在被观察元素的父盒子上

3D旋转
绕轴转，绕x轴时与2D旋转没区别。
左手准则，拇指指向正方形，四指弯曲方向则为运动方向。
若多个旋转rotate3的（x,y,z,…deg）方向为矢量相加。如（1,1,0,45deg）则为xy轴中的45°转。
做一个旋转盒子，如硬币之类的👇

      <style>     
       .box{
            width: 300px;
            height: 300px;
            position: relative;
            margin: 100px auto;
            transition: all 0.6s;
            /* 给背面盒子保留空间 */
            transform-style: preserve-3d;
        }
        .front,
        .back{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            font-size: 14px;
            text-align: center;
            line-height: 300px;
        }
        .back{
            background-color: tomato;
            transform: rotateY(180deg);
        }
        .front{
            background-color: thistle;
            z-index: 1;
        }
        .box:hover{
            transform: rotateY(180deg);
        }
    </style>
   <div class="box">
       <div class="front">正面</div>
       <div class="back">反面</div> 
    </div>