Question

在我的网站上加载动画表情符号时，我想默认显示静态图像，然后在加载图像后显示动画表情符号。

我使用了之前的伪元素来加载动画表情符号图像，但一旦加载，静态图像就会在背景中显示。

有没有办法通过纯粹使用CSS来隐藏静态图像？

＆＃13;

.zcslymsg-anim-72-thumbsup
{
  background: url(/officechat/images/default/sm-animation/1-animsmiley72.png) no-repeat;
    background-size: auto;
    width: 72px;
    height: 72px;
    background-position: -519px 0px;
    animation:none;
}

.zcslymsg-anim-72-thumbsup:before
{
    content: "";
    background: url(/officechat/images/default/sm-animation/72/thumbsup.png) no-repeat;
    position: absolute;
    background-size: auto;
    width: 72px;
    height: 72px;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(120);
    animation-name: smileyanim-72;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}

＆＃13;

<em class="zcslymsg-anim-72-thumbsup" code=":thumbsup!:" title="Thumbs up"></em>

＆＃13;

使用CSS动态设置背景图像

0 个答案: