v2.exhq.dev/src/components/pfp.tsx

50 lines
No EOL
1.7 KiB
TypeScript

import HoverComponent from "./name"
import "./pfp.css"
function remov() {
for (let i = 0; i < document.styleSheets.length; i++) {
let styleSheet = document.styleSheets[i];
let rules = styleSheet.cssRules || styleSheet.rules;
for (let j = 0; j < rules.length; j++) {
let rule = rules[j];
if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
styleSheet.deleteRule(j);
}
}
}
}
export function Bdpfp() {
return <div onmouseenter={remov} class='header bd' >
<div class="birthdayparent">
<img class='birthdaypfp birthday' src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" />
<img class='birthdayhat birthday' src="./birthday.png" alt="" />
<HoverComponent />
</div>
</div>
}
export function Normalpfp() {
return <div class="birthdayparent header normal">
<img class="initialanim" src="https://dp.nea.moe/avatar/712639419785412668.png" alt="LMAO IMAGINE BEING BLIND" onMouseEnter={(e) => {
(e.target as HTMLImageElement).animate([
{ transform: "rotateZ(0deg)" },
{ transform: "rotateZ(360deg)" },
], {
duration: 400,
iterations: 1,
})
}} onClick={(e) => {
(e.target as HTMLImageElement).animate([
{ transform: "rotateY(0deg)" },
{ transform: "rotateY(360deg)" },
], {
duration: 150,
iterations: 1,
})
}} />
<HoverComponent />
</div>
}