Question

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

＆＃13;

var logo = document.querySelector('#main-logo');
var divshinny = document.querySelector('.shiny-effect');

divshinny.style.height = logo.offsetHeight + 'px';
divshinny.style.webkitMaskSize = logo.offsetWidth + 'px';

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

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

提前致谢。

Answer 1

我已将关键帧从使用px更改为使用％。

此选项的工作原理是将background-size设置为不同于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>

Answer 2

有以下选项：

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

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

2 个答案: