Fatal编程技术网
  • css/
  • 渐变动画制作CSS don'；无法在Internet Explorer/Edge/Safari上正确显示

渐变动画制作CSS don'；无法在Internet Explorer/Edge/Safari上正确显示

css internet-explorer safari

渐变动画制作CSS don'；无法在Internet Explorer/Edge/Safari上正确显示,css,internet-explorer,safari,microsoft-edge,Css,Internet Explorer,Safari,Microsoft Edge,在google chrome中，我的html文件与css样式配合得很好，它有一个渐变动画，我无法让它在edge/internet explorer/safari上工作，有人能帮我吗 我尝试了Pie3css，添加了doctypehtml，解析了css，但是仍然看不到动画 我也用过这个自动刷新器，但它就是不起作用 <!DOCTYPE html> <meta name="viewport" content="width=device-width, initial-scale=1"&g

在google chrome中，我的html文件与css样式配合得很好，它有一个渐变动画，我无法让它在edge/internet explorer/safari上工作，有人能帮我吗

我尝试了Pie3css，添加了doctypehtml，解析了css，但是仍然看不到动画

我也用过这个自动刷新器，但它就是不起作用

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" media="screen">
   * {
   font-family: Helvetica;
   }
   html, body {
   height: 100%;
   }
   body {
   margin: 0;
   font-weight: 100;
   text-transform: uppercase;
   }
   .zoll-container {
   background: linear-gradient(221deg, #43cea2, #00a5f9, #0010f9);
   background-size: 400% 400%;
   -webkit-animation: Gradient 15s ease infinite;
   -moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
   padding-bottom: 20px ;
   box-shadow: 0 0 20px rgba(0,0,0,0.4);
   }
   @-webkit-keyframes Gradient {
   0% {
   background-position: 0% 50%
   }
   50% {
   background-position: 100% 50%
   }
   100% {
   background-position: 0% 50%
   }
   }
   table {
   width: 90%;
   border-collapse: collapse;
   overflow: hidden;
   box-shadow: 0 0 20px rgba(0,0,0,0.3);
   background-color: rgba(255,255,255,0.9);
   border-spacing: 0;
   border-collapse: collapse;
   z-index: 1;
   }
   td, th {
   cursor: pointer;
   padding: 10px;
   position: relative;
   color: #000;
   border: solid 1px #F2F2F2
   }
   td {
   font-family: Helvetica;
   font-weight: 100;
   text-transform: uppercase;
   }
   th {
   text-align: left;
   color: #FFF ;
   font-family: Helvetica;
   font-weight: 200;
   }
   tbody tr:hover {
   background-color: rgba(0,0,0,0.1);
   }
   td:hover::after { 
   background-color: rgba(0,0,0,0.9);
   content: '\00a0';  
   height: 10000px;    
   left: 0;
   position: absolute;  
   top: -5000px;
   width: 100%;
   z-index: -1;     
   }
   tr:nth-child(even) {
   background-color: rgba(0,0,0,0.1)
   }
   .zoom {
   transition: transform .2s;
   }
   .zoom:hover {
   -ms-transform: scale(.9); /* IE 9 */
   -webkit-transform: scale(.9); /* Safari 3-8 */
   transform: scale(.9); 
   }
   /* unvisited link */
   a:link {
   color: #000000;
   }
   /* visited link */
   a:visited {
   color: #000000;
   }
   /* mouse over link */
   a:hover {
   color: #00a5f9;
   }
   /* selected link */
   a:active {
   color: #1ABFFF;
   }
   /* single cell highlight colors for color palette column */
   td.teal:hover {background-color: rgba(0,128,128,0.2); color: white;}
   td.red:hover {background-color: rgba(255,0,0,0.2); color: white;}
   td.purple:hover {background-color: rgba(128,0,128,0.2); color: white;}
   td.blue:hover {background-color: rgba(0,0,255,0.2); color: white;}
   td.titanium:hover {background-color: rgba(182,175,169,0.2); color: white;}
   thead {
   font-family: Helvetica;
   background: linear-gradient(221deg, #43cea2, #00a5f9, #0010f9);
   background-size: 400% 400%;
   -webkit-animation: Gradient 15s ease infinite;
   -moz-animation: Gradient 15s ease infinite;
   animation: Gradient 15s ease infinite;
   }

</style>
<body>
   <div class="zoll-container">
      <center><img src="https://files.radcliffecardiology.com/s3fs-public/Zoll_white.png" alt="zoll-medical-logo" width="240" height="135"></center>
      <center>
         <p style="font-size:130%;color:#FFF;">
            Supported Browser: Internet Explorer, Chrome
         </p>
      </center>
   </div>
   <p> 
      <br> 
   </p>
   <center>
      <table>
         <thead>
            <tr>
               <th>INSTANCE</th>
               <th>TYPE</th>
               <th>LAST REFRESHED</th>
               <th>COLOR PALETTE</th>
               <th>CLIENT JAVA</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th colspan="5"></th>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"> 
                  ZOLL</a>
               </td>
               <td>Production</td>
               <td>Date</td>
               <td class="teal">Teal</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  UAT</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="red">Red</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  DEV1</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="purple">Purple</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  DEV2 (test)</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="titanium">Titanium</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  GOLD</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="titanium">Titanium</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"
                  target="blank">
                  DAILY</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="red">Red</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td>WINDOWS SERVERS</a>
               </td>
               <td>Remote desktop connection </td>
               <td></td>
               <td></td>
               <td></td>
            </tr>
            <tr>
               <th colspan="5"></th>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  AZM</a>
               </td>
               <td>Production</td>
               <td>Cell 3</td>
               <td class="blue">Blue</td>
               <td>Java 8 Update 121</td>
            </tr>
            <tr>
               <td><a href=
                  "www.google.com"target="blank">
                  INT1</a>
               </td>
               <td>Cloned</td>
               <td>Cell 3</td>
               <td class="titanium">Titanium</td>
               <td>Java 8 Update 121</td>
            </tr>
         </tbody>
      </table>
   </center>
</body>
<script>
   $(document).ready(function(){
     $('[data-toggle="tooltip"]').tooltip();   
   });
</script>


* {
字体系列：Helvetica；
}
html，正文{
身高：100%；
}
身体{
保证金：0；
字号：100；
文本转换：大写；
}
佐尔集装箱{
背景：线性梯度（221deg，#43cea2，#00a5f9，#0010f9）；
背景大小：400%400%；
-webkit动画：渐变15s轻松无限；
-moz动画：渐变15s轻松无限；
动画：渐变15s轻松无限；
垫底：20px；
盒影：0.20px rgba（0,0,0,0.4）；
}
@-webkit关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
桌子{
宽度：90%；
边界塌陷：塌陷；
溢出：隐藏；
盒影：0.20px rgba（0,0,0,0.3）；
背景色：rgba（255255,0.9）；
边界间距：0；
边界塌陷：塌陷；
z指数：1；
}
td，th{
光标：指针；
填充：10px；
位置：相对位置；
颜色：#000；
边框：实心1px#f2f2
}
运输署{
字体系列：Helvetica；
字号：100；
文本转换：大写；
}
th{
文本对齐：左对齐；
颜色：#FFF；
字体系列：Helvetica；
字号：200；
}
t车身tr：悬停{
背景色：rgba（0,0,0,0.1）；
}
td:hover:：在{
背景色：rgba（0,0,0,0.9）；
内容：'\00a0'；
高度：10000px；
左：0；
位置：绝对位置；
顶部：-5000px；
宽度：100%；
z指数：-1；
}
tr:n个孩子（偶数）{
背景色：rgba（0,0,0,0.1）
}
.zoom{
转变：转变2；
}
.缩放：悬停{
-ms变换：比例（.9）；/*IE 9*/
-webkit变换：缩放（.9）；/*Safari 3-8*/
变换：比例（.9）；
}
/*未访问链接*/
a:链接{
颜色：#000000；
}
/*访问链接*/
a:参观了{
颜色：#000000；
}
/*鼠标悬停链接*/
a:悬停{
颜色：#00a5f9；
}
/*选定链接*/
a:主动的{
颜色：#1abff；
}
/*调色板列的单单元格高亮显示颜色*/
蓝绿色：悬停{背景色：rgba（0128128,0.2）；颜色：白色；}
红色：悬停{背景色：rgba（255,0,0,0.2）；颜色：白色；}
紫色：悬停{背景色：rgba（128,0128,0.2）；颜色：白色；}
td.蓝色：悬停{背景色：rgba（0,0255,0.2）；颜色：白色；}
钛：悬停{背景色：rgba（182175169,0.2）；颜色：白色；}
泰德{
字体系列：Helvetica；
背景：线性梯度（221deg，#43cea2，#00a5f9，#0010f9）；
背景大小：400%400%；
-webkit动画：渐变15s轻松无限；
-moz动画：渐变15s轻松无限；
动画：渐变15s轻松无限；
}


支持的浏览器：Internet Explorer、Chrome







例子
类型
上次刷新
调色板
客户端JAVA
生产
日期
水鸭
Java 8更新121
克隆的
第三单元
红色
Java 8更新121
克隆的
第三单元
紫色
Java 8更新121
克隆的
第三单元
钛
Java 8更新121
克隆的
第三单元
钛
Java 8更新121
克隆的
第三单元
红色
Java 8更新121
WINDOWS服务器
远程桌面连接
生产
第三单元
蓝色
Java 8更新121
克隆的
第三单元
钛
Java 8更新121
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});

-webkit关键帧只在Chrome、Firefox和Opera中有效。您可以参考MDN中的。您应该添加
关键帧
css样式，使其在Edge、IE和Safari中工作：


@keyframes Gradient {
        0% {
            background-position: 0% 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0% 50%
        }
    }


要使
thead
css样式在IE和Edge中工作，您可以将其修改为
thead th
css样式作为解决方法：


thead th {
        font-family: Helvetica;
        background: linear-gradient(221deg, #43cea2, #00a5f9, #0010f9);
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }



嗨，丹尼尔！欢迎来到Stack Exchange！作为今后的一般规则，请只添加解决该问题所需的最少代码量。粘贴整个文档是不必要的，尤其是在这样的问题上。