41 lines
975 B
HTML
41 lines
975 B
HTML
<html class="reftest-wait">
|
|
<style>
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #4a4a4a;
|
|
mask: url(pinwheel_logo.svg) center center/contain no-repeat;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
.logo .background {
|
|
background-image: linear-gradient(red, green);
|
|
width: 65px;
|
|
height: 65px;
|
|
background-size: cover;
|
|
background-position: 50%;
|
|
will-change: transform;
|
|
}
|
|
</style>
|
|
<a class="logo">
|
|
<span class="background"></span>
|
|
</a>
|
|
<script>
|
|
function doTest() {
|
|
var i = 0;
|
|
var e = document.getElementsByClassName("background")[0];
|
|
var rotator = function() {
|
|
var rotation = i / 60;
|
|
e.style.transform = "rotate(" + rotation + "turn)";
|
|
if (i < 45) {
|
|
i += 1;
|
|
window.requestAnimationFrame(rotator);
|
|
} else {
|
|
document.documentElement.removeAttribute("class");
|
|
}
|
|
};
|
|
window.requestAnimationFrame(rotator);
|
|
};
|
|
window.addEventListener("MozReftestInvalidate", doTest);
|
|
</script>
|
|
</html>
|