jquery - 可以使用 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 中的背景位置，我的问题是我可以直接使用基于图像的 javascript 创建关键帧尺寸。如果有任何其他方法可以实现，请告诉我。

提前致谢。

Answer 1

我已将您的关键帧从使用 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>