问题描述
大家好，
我有一个用CSS编写的加载微调器，但我需要为不支持的浏览器添加回退动画GIF的功能CSS代码。 （我已经添加了一些供应商前缀）我不知道我将在何处以及如何添加任何回退代码以及理想情况下代码应该是什么。我在下面提供了一个CSS类的版本。有人可以帮忙吗？
谢谢！
----
。loading {
保证金：10％自动;
border-bottom：11px solid #fff;
border-left：11px solid #fff;
border-right：11px solid #fff;
border-top：11px solid＃59AFDA;
border-radius：100％;
身高：120px;
宽度：120px;
-webkit-animation：spin 1.2s无限线性;
-moz-animation：旋转1.2s无限线性;
-ms-animation：旋转1.2s无限线性;
-o-动画：旋转1.2s无限线性;
动画：旋转1.2s无限线性;
}
@关键帧旋转{
来自{
-webkit-transform：rotate（0deg）;
-moz-transform：rotate（0deg） ;
-o-transform：rotate（0deg）;
-ms-transform：rotate（0deg）;
transform：rotate（0deg） ）;
}
到{
-webkit-transform：rotate（359deg）;
-moz-transform：rotate（359deg）;
-o-transform：rotate（359deg） ）;
-ms-transform：rotate（359deg）;
transform：rotate（359deg）;
}
$ / b $ b $
@ -moz-keyframes旋转{
来自{
-moz-transform：rotate（0deg）;
transform：rotate（0deg）;
}
到{
-moz-transform：rotate（359deg）;
transform：rotate（359deg）;
}
}
@ -webkit-keyframesspin{
from {
-webkit -transform：rotate（0deg）;
transform：rotate（0deg）;
}
到{
-webkit-transform：rotate（359deg）;
transform：rotate（359deg）;
}
}
@ -ms-keyframes旋转{
来自{
-ms-transform：rotate （0deg）;
转换：旋转（0deg）;
}
到{
-ms-transform：rotate（359deg）;
变换：旋转（359deg）;
}
}
@ -o-keyframes旋转{
来自{
-o-transform：rotate（0deg）;
变换：旋转（0deg）;
}
到{
-o-transform：rotate（359deg）;
变换：旋转（359deg）;
}
}
Hi all,
I have a loading spinner written in CSS, but I need to add the ability of a fallback animated GIF for browsers that do not support the CSS code. (I have already added some vendor prefixes too) I'm not sure where and how I would add any fallback code and what the code should ideally be. I have supplied a version of the CSS class below. Can anyone help?
Thanks!
----
.loading {
margin: 10% auto;
border-bottom: 11px solid #fff;
border-left: 11px solid #fff;
border-right: 11px solid #fff;
border-top: 11px solid #59AFDA;
border-radius: 100%;
height: 120px;
width: 120px;
-webkit-animation: spin 1.2s infinite linear;
-moz-animation: spin 1.2s infinite linear;
-ms-animation: spin 1.2s infinite linear;
-o-animation: spin 1.2s infinite linear;
animation: spin 1.2s infinite linear;
}
@keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-o-transform: rotate(359deg);
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-webkit-keyframes "spin" {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-ms-keyframes "spin" {
from {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@-o-keyframes "spin" {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
transform: rotate(359deg);
}
}
推荐答案
.loading {
...
background-image: url(loading-spinner.gif);
}
.cssanimations .loading {
background-image: none;
-webkit-animation: spin 1.2s infinite linear;
-moz-animation: spin 1.2s infinite linear;
-ms-animation: spin 1.2s infinite linear;
-o-animation: spin 1.2s infinite linear;
animation: spin 1.2s infinite linear;
}
这篇关于如何将图像回退添加到一类CSS3代码中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！