问题描述
当我想要实现一个功能,更新提示的动画,如下
使用伪元素设置背景图片的方法,但是我添加的背景图片显示不出来.
html代码如下
<ul class='parent'>
<li class='child'>
<a href="#">一键海涛</a>
</li>
</ul>
解决办法
需要将伪元素设置定位或者设置行内块元素
1.设置行内块元素的方法
伪元素是行内元素,大小根据内容来变的,内容为空,即使有背景图片也是显示不出来的,所以需要转换成行内块元素
.child::after {
content: "";
display: inline-block;
height: 19px;
width: 33px;
top: 10px;
background: url(./new.png) no-repeat;
animation: updown 0.2s ease-in-out 2.7s infinite alternate;
}
/* 上下浮动动画 */
@keyframes updown {
from {
transform: translate(0, 0);
}
to {
transform: translate(0, 3px);
}
}
需要满足的条件:
1.content属性要有,设置为空内容
2.长宽
3.background背景属性
4.display: inline-block;
demo结果:
2.定位的方式
“子绝父相”(原理不太懂…)
.parent {
position: relative;
}
.child::after {
content: "";
position: absolute;
height: 19px;
width: 33px;
background: url(./new.png) no-repeat;
}
END