所以我喜欢在这里找到的角指示器动画: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;
}