如何将图像回退添加到一类CSS3代码中？ [英] How can I add an image fallback to a class of CSS3 code?
问题描述
大家好，
我有一个用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);
}
}
推荐答案
最简单的解决方案可能是添加 Modernizr [ ^ ]添加到您的网站，并选择CSS动画和添加CSS类选项。这将在支持CSS动画的浏览器中为HTML元素添加cssanimations类，您可以使用它调整你的CSS：
The simplest solution would probably be to add Modernizr[^] to your site with the "CSS Animations" and "Add CSS Classes" options selected. This will add a "cssanimations" class to theHTMLelement in browsers which support CSS animations, which you can use to adapt your CSS:
.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代码中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
