Crear un cursor de Pacman animado con CSS3 y jQuery

Vista prévia

Descripción

Un cursor animado Pacman creado para reemplazar el puntero del ratón por defecto, construido sobre jQuery y CSS/CSS3. No se requiere imagen.

Funcionamiento

Incluya la última versión de la biblioteca JavaScript de jQuery en el documento.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Cree el HTML para el cursor pacman.

<div id="cursor">
<div id="body"></div>
<div class="eye"></div>
<div class="mouth"></div>

Los estilos CSS requeridos.

#cursor {
position: absolute;
}
#body {
height: 20px;
width: 20px;
border-radius: 50%/50%;
background: #FFFF00;
}
.eye {
height: 2px;
width: 2px;
border-radius: 50%/50%;
background: #000;
margin-top: -16px;
margin-left: 10px;
}
.mouth {
width: 0;
height: 0;
border-style: solid;
border-color: transparent #000000 transparent transparent;
-webkit-animation: omnomnom 0.5s infinite linear;
}
 @-webkit-keyframes omnomnom {
0% {
border-width: 6px 9px 6px 0;
margin-left:12px;
margin-top:-1px;
}
25% {
border-width: 3px 9px 3px 0;
margin-left:16px;
margin-top:1px;
}
50% {
border-width: 1px 9px 1px 0;
margin-left:19px;
margin-top:2px;
}
75% {
border-width: 3px 9px 3px 0;
margin-left:16px;
margin-top:1px;
}
100% {
border-width: 6px 9px 6px 0;
margin-left:12px;
margin-top:-1px;
}
}

El script de jQuery para habilitar el cursor de pacman.

<script>
$( document ).mousemove(function(e) {
$('#cursor').css({
left:e.pageX + 20,
 top:e.pageY
});
});</script>