css3 仅适用于谷歌

Posted 2023-03-06

【中文标题】css3 仅适用于谷歌

【英文标题】：css3 works just on google

【发布时间】：2014-08-05 13:54:59

【问题描述】：

这是一个 JSFiddle http://jsfiddle.net/6hLf6/

这是css

#loading 
            margin: 80px auto;
            position: relative;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
                    border-radius: 50px;
            background: #ccc;
            font: 12px "Lucida Grande", Sans-Serif;
            text-align: center;
            line-height: 100px;
            color: white;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);

        
        #loading:before 
            content: "";
            position: absolute;
              left: -20px;
               top: -20px;
            bottom: -20px;
             right: -20px;
            -webkit-border-radius: 70px;
               -moz-border-radius: 70px;
                    border-radius: 70px;
            background: #eee;
            z-index: -2;
            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        
        #loading span 
            position: absolute;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 80px solid rgba(255,255,255,0.7);
            z-index: -1;
            top: -28px;
            left: 0px;
            -webkit-animation: ticktock 5s linear infinite;
            -webkit-transform-origin: 50px 80px;
        
        #loading strong 
            overflow: hidden;
            display: block;
            margin: 0 auto;
            -webkit-animation: expand 2.5s linear infinite;
        

        @-webkit-keyframes expand 
            0% 
                    width: 0;
            
            100% 
                    width: 60px;
            
        

        @-webkit-keyframes ticktock 
            0% 
                    -webkit-transform: rotate(0);
            
            100% 
                    -webkit-transform: rotate(360deg);
            
        

这是html

<div id="loading"><strong>loading...</strong><span></span></div>

这是结果：

火狐

firefox中圆圈不旋转的问题

IE11

不是圆，也不是旋转

只有 chrome 工作正常

你能帮忙吗？

【问题讨论】：

让我直说。您正在使用专门针对 Chrome 和其他 Webkit 浏览器的前缀 CSS (-webkit-)，然后想知道为什么只有 Chrome 可以工作？

还要确保 IE 没有进入兼容模式。

嗯，它适用于我的 Opera (Windows 8.1/Opera 22)。

@DavidThomas Opera 现在使用 Webkit。呃，眨眼。

@Jon 我也用过-moz

【参考方案1】：

Internet Explorer 和 Firefox 使用标准扩展而不是 webkit 扩展来制作动画。您需要添加标准 css 以及 webkit 供应商扩展，这会将您的 css 更改为：

    #loading 
    margin: 80px auto;
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #ccc;
    font: 12px "Lucida Grande", Sans-Serif;
    text-align: center;
    line-height: 100px;
    color: white;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);

#loading:before 
    content: "";
    position: absolute;
      left: -20px;
       top: -20px;
    bottom: -20px;
     right: -20px;
    -webkit-border-radius: 70px;
       -moz-border-radius: 70px;
            border-radius: 70px;
    background: #eee;
    z-index: -2;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);

#loading span 
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 80px solid rgba(255,255,255,0.7);
    z-index: -1;
    top: -28px;
    left: 0px;
    -webkit-animation: ticktock 5s linear infinite;
    -webkit-transform-origin: 50px 80px;
    animation: ticktock 5s linear infinite;
    transform-origin: 50px 80px;

#loading strong 
    overflow: hidden;
    display: block;
    margin: 0 auto;
    -webkit-animation: expand 2.5s linear infinite;
    animation: expand 2.5s linear infinite;


@-webkit-keyframes expand 
    0% 
            width: 0;
    
    100% 
            width: 60px;
    


@-webkit-keyframes ticktock 
    0% 
            -webkit-transform: rotate(0);
    
    100% 
            -webkit-transform: rotate(360deg);
    

        @keyframes expand 
    0% 
            width: 0;
    
    100% 
            width: 60px;
    


@keyframes ticktock 
    0% 
            transform: rotate(0);
    
    100% 
            transform: rotate(360deg);
    

JSfiddel

这应该允许您的 css 在大多数现代浏览器上加载。但是，根据您将吸引哪些用户，可能值得实施其他供应商扩展，例如 -moz- 或 -o-。

有关使用哪些扩展的信息，sites 告诉您哪些浏览器版本支持哪些扩展。

【讨论】：

在你回答之前，我已经添加了 -moz 和 -ms 并且它适用于 firefox 和 chrome，但你的答案也适用于 IE。你帮了我很多人，非常感谢你真的很感激

请问我应该使用-ms 吗？

在Internet Explorer中，从版本10开始支持标准的无前缀动画。我认为版本9没有任何css动画支持。所以对于动画不需要包含-ms。

你的 jfiddle 在 IE 上工作，但是当我在 IE 上累了我的代码时它不能工作，为什么？我需要更改 IE 中的配置或设置吗？

你能检查我的新问题吗***.com/questions/24232693/…