Skip to content

Instantly share code, notes, and snippets.

@nextend

nextend/lighthouse.html

Created July 4, 2025 12:54
Show Gist options
  • Save nextend/8d744edc65e537ba283d64466556d2b1 to your computer and use it in GitHub Desktop.
Save nextend/8d744edc65e537ba283d64466556d2b1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lighthouse.html
<!DOCTYPE html>
<html class="no-js" lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="https://gmpg.org/xfn/11">
<title>TEST</title>
<style>
html,
body {
margin: 0;
}
@property --variable-rotate-z {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
[data-uuids*="6e1f3438-3e0f-4130-9fa3-17be9e2dac24"] {
width:100px;
border-radius: 100%;
aspect-ratio: 1 / 1;
background-image: linear-gradient(0deg, #ff0000 0%, #ff0000 49%, #0002ff 51%, #0002ff 100%);
background-position: 50% 50%;
background-attachment: scroll;
background-repeat: repeat;
background-size: cover;
background-blend-mode: normal;
}
</style>
</head>
<body>
<h1>AAAAAAAAAAAAAAA</h1>
<div data-uuid="6e1f3438-3e0f-4130-9fa3-17be9e2dac24" data-uuids="6e1f3438-3e0f-4130-9fa3-17be9e2dac24" class="M_EL_Div"></div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const targetElement = document.querySelector("[data-uuids*='6e1f3438-3e0f-4130-9fa3-17be9e2dac24']");
Promise.resolve().then(() => {
const cs = window.getComputedStyle(targetElement);
console.log(cs.transform); // accessing transform at this point is the key.
targetElement.style.setProperty('transform', 'rotateZ(var(--variable-rotate-z))');
});
const animation = new Animation(new KeyframeEffect(targetElement, [
{
"offset": 0,
"--variable-rotate-z": '0deg'
},
{
"offset": 1,
"--variable-rotate-z": '360deg'
}
], {
delay: 0,
duration: 20000,
fill: "forwards",
iterations: Infinity
}));
animation.play();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment