.dog
.dog__emoji 🐶
.ball ⚽️
View Compiled
html
body
background linear-gradient(32deg, #00b16a, #3fc380)
min-height 100vh
display flex
align-items center
justify-content center
cursor none
.dog
.ball
position absolute
transform translate(calc(var(--x) * 1px), calc(var(--y) * 1px))
.dog
&__emoji
animation excite .05s infinite alternate
font-size 4rem
transition transform .5s .5s cubic-bezier(.69,1.46,1,1.26)
.ball
font-size 1.5rem
transition transform 0s
@keyframes excite
0%
transform translateY(5%)
100%
transform translateY(-5%)
View Compiled
const ROOT = document.documentElement
const update = (e) => {
ROOT.style.setProperty('--x', e.x - innerWidth / 2)
ROOT.style.setProperty('--y', e.y - innerHeight / 2)
}
window.addEventListener('mousemove', update)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.