2

所以我喜欢在这里找到的角指示器动画：http: //tympanus.net/Development/CreativeLoadingEffects/

目前在 :after 选择器中播放了一个 CSS 动画。
我下载了文件并尝试在下面对其进行反向工程，基本上我希望这个动画 gif 在角三角形内播放，而不是 CSS 动画：

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

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

注意：按钮上方的旋转图像是我试图在单击按钮时显示在角三角形内的图像。

你知道如何让背景图像显示在 :after 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;
}
4

3 回答 3

1

我认为您正在寻找的是 content 属性，例如：

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

然后您可以删除背景图像。

于 2013-09-20T19:54:37.920 回答
1

像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;

}

于 2013-09-20T20:25:15.317 回答
1

你在角落里失去了你的形象。它是由旋转引起的。事实上，这种旋转也会导致您的动画图像旋转。

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

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

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

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

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

于 2013-09-20T20:55:38.233 回答