如何让背景图像出现在：选择器之后？

Question

所以我喜欢这里的 Corner Indicator 动画：http://tympanus.net/Development/CreativeLoadingEffects/

目前在：选择器后面有一个CSS动画 我下载了这个文件，并试图在下面对它进行反向工程，基本上不是CSS动画，我希望这个动画gif在角落三角形内部播放：

我的演示：http://leongaban.com/_stack/after/

jsFiddle：http://jsfiddle.net/leongaban/vzmPm/3/

注意：当您点击按钮时，按钮上方的旋转图像就是我想要显示在角三角形内部。

你知道如何让背景图像显示在：div之后吗？

/* Loading circle idea from http://codepen.io/Metty/details/lgJck */
.la-anim-10::before,
.la-anim-10::after {
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
    position: absolute;
    display: block;
}

.la-anim-10::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-right-color: #bb344f;
    border-left-color: #bb344f;
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
    -webkit-animation: rotation 3s linear infinite;
    animation: rotation 3s linear infinite;
}

.la-anim-10::after {
    width: 77px;
    height: 77px;
    background-image: url('../img/loader-logo.gif');
    background-repeat: no-repeat;
}

Answer 1

我认为你要找的是内容属性，例如：

#test:after {
    content: url('../img/loader-logo.gif');
}

然后你可以删除背景图片。

Answer 2

像 this ？

.la-anim-10::before {
    margin-left: -40px;
    width: 80px;
    height: 80px;
    /*border-right-color: #bb344f;
    border-left-color: #bb344f;*/
    background: url('http://leongaban.com/_stack/after/img/loader-logo.gif') no-repeat center;
    border:none;
    -webkit-animation: rotation 3s linear infinite;
    animation: rotation 3s linear infinite;

}

Answer 3

你的角落很远就会失去你的形象。它是由旋转引起的。实际上，此旋转也会导致动画图像旋转。

我不是将旋转的方形排列成三角形，而是使用边框模拟三角形。这样，就不需要使用旋转。

border-style: solid;
border-width: 0 150px 150px 0;
border-color: transparent #f58733 transparent transparent;

我在:after选择器中设置了图片，并正确调整了三角形的翻译。

现在你有了一个漂亮的三角形，你的动画图像就在角落里，而不会失去你的动画效果。

仍然需要一些调整，但我认为jsfiddle会帮助你。