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

本文主要是介绍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

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

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

这篇关于H5C3练习心得2024.01.05（鼠标移入旋转动画）--filter,::after,z-index的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---