首页 > 解决方案 > 我有这个 css 动画,当我在本地测试它时可以正常工作,但是当我将它启动到 github 页面时它不起作用

问题描述

我有这个动画在本地运行良好但是当我将网站启动到 github 页面时它停止工作

   .Vbtn-1 {
      background:transparent;
      text-align: center;
      float:left;
      color:white;
   }
   .Vbtn-1 svg {
      height: 50px;
      width: 165px;
      left: 0%;
      position: absolute;
      top: -5px;
   }
  .Vbtn-1 rect {
   fill: none;
   stroke: white;
   stroke-width: 4;
   stroke-dasharray: 422, 0;
   transition: all 450ms linear 0s;
}
.Vbtn-1:hover {
   background: rgba(225, 51, 45, 0);
   color: white;
   font-weight: 900;
   letter-spacing: 1px;
   transition: all 150ms linear 0s;
}
.Vbtn-1:hover rect {
   stroke-width: 5;
   stroke-dasharray: 15, 310;
   stroke-dashoffset: 48;
   -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
   transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

是因为我在页面上启动它吗?我很困惑为什么它最终在同一个浏览器上运行时看起来和工作方式不完全相同

标签: csswebkitcss-transitions

解决方案


推荐阅读