我遇到了我创建的预加载器的问题。 这仅仅是一个简单的面膜效果,看起来像这样:CSS Scale在转换时会导致锯齿状的边缘
(function() {
'use strict';
setTimeout(function() {
document.body.className = 'loaded';
}, 3000);
})();
#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 */
}
}
<h1>This content is visible when the circle exapnds</h1>
\t <div id="loader-wrapper">
\t \t <div id="loader"></div>
\t \t <div class="loader-background"></div>
\t </div>
我创建了一个codepen所以你可以看到这个问题:
https://codepen.io/r3plica/pen/rwLagV
(注意,这是在铬)
你可能会试一下blured有点阴影:'box-shadow:0px 0px 0px 2000px#000000,inset 0 0 5px#000000;'https://codepen.io/anon/pen/YQWyOz –