You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/tutorial/16-special-elements/07-svelte-body/app-a/App.svelte

35 lines
643 B

<script>
let hereKitty = false;
const handleMouseenter = () => (hereKitty = true);
const handleMouseleave = () => (hereKitty = false);
</script>
<svelte:body />
<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
class:curious={hereKitty}
alt="Kitten wants to know what's going on"
src="/tutorial/kitten.png"
/>
<style>
img {
position: absolute;
left: 0;
bottom: -60px;
transform: translate(-80%, 0) rotate(-30deg);
transform-origin: 100% 100%;
transition: transform 0.4s;
}
.curious {
transform: translate(-15%, 0) rotate(0deg);
}
:global(body) {
overflow: hidden;
}
</style>