个人中心
gpt4 book ai didi

css - 渐变动画使 CSS 无法在 Internet Explorer/Edge/Safari 上正确显示

转载 作者：太空宇宙 更新时间：2023-11-04 06:02:57 24 4
gpt4 key购买 nike

在谷歌浏览器中，我的 html 文件与其 css 样式配合得很好，它有一个渐变动画，我无法让它在 edge/internet explorer/safari 上工作，有人可以帮助我吗？

我试过Pie3css，添加doctypehtml，解析css，还是看不到动画。

我也用过这个 autoprefixer 东西，但它就是行不通。

<!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>

最佳答案

-webkit-keyframes 仅适用于 Chrome、Firefox 和 Opera。你可以引用broswer compatibility在 MDN 中。您应该添加 keyframes 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 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;
    }

关于css - 渐变动画使 CSS 无法在 Internet Explorer/Edge/Safari 上正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57121110/

24 4 0
文章推荐： html - 这个 css 标签 : font-family "URWPSK+ArialMT"? 中的大写字母是什么意思:
文章推荐： c - “下标值既不是数组也不是指针也不是 vector ”错误
文章推荐： c++ - 最佳实践 : how to check for NULL return value in C/C++
文章推荐： c - 为什么 strstr 在我的 C 程序中似乎不起作用？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com