关于伪元素如何添加过渡动画功能
首先准备一个容器,在容器中添加伪元素及想添加的过渡属性初始值
这里使用width举例我将width初始设置为0,过渡到100%;
- 初始设置元素基本样式
<style>
div{
position: relative;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 100px auto;
background-color: #28e874;
}
</style>
</head>
<body>
<div>按钮</div>
- 设置伪元素的基本样式并且将width设置为0;
div::before{
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
margin: 0 auto;
height: 30px;
width: 0px; //初始为0
transition: all .2s linear;
background-color: rgba(30, 110, 213,.5);
}
- 添加过渡的目标宽度或者目标属性值
div:hover::before{
width: 100%; //过渡到100
}
- 最后鼠标移入移出就会有动画效果了!
- 不管大家要添加什么效果都可以按照这个试试噢!如果有什么问题,希望小伙伴们可以及时纠正互相学习!