H5C3练习心得2024.01.05（鼠标移入旋转动画）--filter,::after,z-index

（一）filter

filte：blur（5px）  高斯模糊

其它相关知识点请看下面这位博主写的，我以后遇到了相关的我在更新吧

 http://t.csdnimg.cn/9mmn1

（二）::after和::before

1.我遇到的代码：

    .box::after {
      content: '';
      width: 500px;
      height: 0px;
      position: absolute;
      background-color:rgba(0,0,0,0);
      left: 0;
			top: 0;
			transform-origin: left center;
			transform: rotate(37deg);
			transition: all ease .5s;
    }
    .box:hover::after {
      height: 300px;
      top:-150px;
      background-color: rgba(0,0,0,0.5)
    }

 相当于在box后面添加一个遮罩层

2.知识点

::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空

用于在前面或后面添加内容

其他的详细内容可以看这位博主写的，我以后碰到类似详细的再更新

http://t.csdnimg.cn/5oRDV

（三）z-index

1.用途

当多个元素同时设置定位时，定位之间会出现重叠现象，这时我们就需要用到z-index来设置他们的层叠样式

2.方法

多个元素就相当于有多个图层

z-index 的取值可为正整数、负整数和 0

默认属性值是 0 

取值越大，定位元素在层叠元素中越居上 。

代码示例：

z-index: 3;/* 改变层级,防止遮罩掩盖文字 */

（四）动画

http://t.csdnimg.cn/Zu0RV

好好研究这个博主写的内容

等我做完这一系列关于动画的案例，我会结合案例和代码以及自己的分析见解，来逐步解析动画的知识点，想看的同学们等我两天。