可以使用 javascript 动态创建关键帧吗？

Question

我想动态创建关键帧，我需要在图像上显示光泽效果，代码如下。

var logo = document.querySelector('#main-logo');
var divshinny = document.querySelector('.shiny-effect');

divshinny.style.height = logo.offsetHeight + 'px';
divshinny.style.webkitMaskSize = logo.offsetWidth + 'px';

.logo-animation {
  width: 40%;
  margin: auto;
  height: 100%;
  position: absolute;
}

.logo-animation #logo-shinny {
  position: relative;
  display: block;
  width: 100%;
  height: 90%;
  text-align: center;
  margin: 5% auto;
}

.logo-animation #logo-shinny img {
  width: 100%;
}

.logo-animation #logo-shinny .shiny-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.5) 98%, rgba(255, 255, 255, 0) 100%) no-repeat;
  -webkit-mask: url("http://dev.iamvdo.me/newLogoCSS3create2.png") center;
  -webkit-mask-size: 500px 361px;
  -webkit-mask-repeat: no-repeat;
  -webkit-animation-name: ShineAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes ShineAnimation {
  from {
    background-position: -200px 0px;
  }
  to {
    background-position: 0px 0px;
  }
}

<div class="logo-animation">
  <div id="logo-shinny">
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" id="main-logo" />
    <div class="shiny-effect"></div>
  </div>
</div>

问题是图像会根据屏幕尺寸调整大小，屏幕越大图像尺寸会越大，但是光泽效果是基于 px 中的背景位置，我的问题是我可以使用 [=26 直接创建关键帧吗=] 基于图像大小。如果有任何其他方法可以实现，请告诉我。

提前致谢。

Answer 1

有以下选项：

您可以使用 background-position 百分比而不是像素。这将需要图像也依赖于容器 width（例如图像 width 也应该以百分比设置）
您可以使用视口测量单位：垂直高度和垂直宽度（例如 100vh 和 100vw）而不是百分比。这可能更合适，因为您的图像取决于屏幕尺寸。同样，理想情况下，图像大小也应该在那些视口测量单位中设置。
您可以使用 JavaScript 与您的动画一起生成 CSS，参见例如this。但是我不会走这条路，因为上面的两个选项必须满足你99.9%的需求。

Answer 2

我已将您的关键帧从使用 px 更改为使用 %。

此选项起作用的诀窍是将背景大小设置为不同于 100% 的值。如果是这种情况，% 位置将不起作用。

我还删除了 webkit 前缀，现代浏览器不再需要它们。

var logo = document.querySelector('#main-logo');
var divshinny = document.querySelector('.shiny-effect');

divshinny.style.height = logo.offsetHeight + 'px';
divshinny.style.webkitMaskSize = logo.offsetWidth + 'px';

.logo-animation {
  width: 40%;
  margin: auto;
  height: 100%;
  position: absolute;
}

.logo-animation #logo-shinny {
  position: relative;
  display: block;
  width: 100%;
  height: 90%;
  text-align: center;
  margin: 5% auto;
}

.logo-animation #logo-shinny img {
  width: 100%;
}

.logo-animation #logo-shinny .shiny-effect {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0.5) 98%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  background-size: 50% 100%;
  animation-name: ShineAnimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes ShineAnimation {
  from {
    background-position: -100% 0px;
  }
  to {
    background-position: 100% 0px;
  }
}

<div class="logo-animation">
  <div id="logo-shinny">
    <img src="http://dev.iamvdo.me/newLogoCSS3create2.png" id="main-logo" />
    <div class="shiny-effect"></div>
  </div>
</div>

可以使用 javascript 动态创建关键帧吗？

Can Keyframes be created using javascript dynamically?

html

css

jquery

keyframe

css-animations