Question

我遇到了我创建的预加载器的问题。它只是一个简单的蒙版效果，如下所示：

＆＃13;

(function() {
  'use strict';

  setTimeout(function() {
    document.body.className = 'loaded';
  }, 3000);
})();

＆＃13;

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader-wrapper .loader-background {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #000000;
}

#loader-wrapper .loader-background::after {
  content: '';
  position: absolute;
  left: 150px;
  bottom: 150px;
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 0px 2000px #000000;
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  transition: all 3s;
}

.loaded #loader-wrapper {
  visibility: hidden;
}

.loaded #loader-wrapper .loader-background::after {
  -webkit-transform: scale(20);
  -moz-transform: scale(20);
  -ms-transform: scale(20);
  transform: scale(20);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

＆＃13;

<h1>This content is visible when the circle exapnds</h1>
	<div id="loader-wrapper">
		<div id="loader"></div>
		<div class="loader-background"></div>
	</div>

＆＃13;

我创建了一个codepen，因此您可以看到问题：

https://codepen.io/r3plica/pen/rwLagV

（请注意，这是在Chrome中）

Answer 1

这是因为您正在拍摄一个小位图，然后进行缩放。如果我们以相反的方式做，边缘会变得光滑。

原始圆圈渲染得非常小，然后缩放到原始大小的20倍。您看到的锯齿状边缘是原始像素！

这里是使用box-shadow进行屏蔽效果的更新。技术是相同的 - 渲染最大的状态，然后在3秒内缩放到它。

＆＃13;

(function() {
  'use strict';

  setTimeout(function() {
    document.body.className = 'loaded';
  }, 500);
})();

＆＃13;

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader-wrapper .loader-background {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #000000;
}

#loader-wrapper .loader-background::after {
  content: "";
  position: absolute;
  border-radius: 100%;
  top: -750px;
  right: 0;
  width: 2000px;
  height: 2000px;
  box-shadow: 0 0 0 10000px #000000;
  transition: all 3s;
  transform: scale(0.1);
  /* Start off-screen */
}

.loaded #loader-wrapper {
  visibility: hidden;
}

.loaded #loader-wrapper .loader-background::after {
  transform: scale(1);
}

＆＃13;

<h1>Updated text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eos modi expedita eius ab totam aspernatur fuga, rem assumenda deleniti?</p>

<div id="loader-wrapper">
  <div id="loader"></div>
  <div class="loader-background"></div>
</div>

＆＃13;

这些值有点粗糙，可能需要进行一些调整以适合您的使用案例。全屏擦除需要比这更大的盒子阴影和结束半径。

转换时，CSS Scale会导致锯齿状边缘

1 个答案: