1.使用data-*更改伪元素的content，只能更改content属性，其他属性不能更改。
<style>
.hei{
background-color: rgb(20, 201, 20);
width: 200px;
height: 50px;
border: 1px solid red;
}
.hei::after{
content: attr(data-text);
display: block;
}
</style>
<body>
<div class="hei" data-text='我是要传递给伪元素的数据'></div>
<script>
let hei = document.querySelector('.hei')
hei.addEventListener('click',function(){
this.dataset.text = '哈哈哈，点击换数据'
console.log(this.dataset)//获取所有的data属性
})
</script>
</body>
2.创建多个class，切换class实现效果
<style>
.btn,.btntibu{
width: 200px;
height: 50px;
background-color: rgb(21, 194, 59);
/* outline: none; */
border: none;
justify-content: center;
align-items: center;
}
.btn::after{
display: inline-block;
content: '';
width: 3px;
height: 3px;
border-radius: 50%;
/* animation: move 1s ease-out infinite ; */
}
.btntibu::after{
display: inline-block;
content: '';
width: 3px;
height: 3px;
border-radius: 50%;
animation: move 1s ease-out infinite ;
}
@keyframes move {
30%{
box-shadow: 3px 0 0 currentColor;
}
60%{
box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor;
}
90%{
box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor;
}
}
</style>
<button class="btn">提交</button>
<script>
btn.addEventListener('click',function(){
this.classList.remove('btn')
this.classList.add('btntibu')
})
</script>
伪元素的box-shadow制作加载中动画效果图
