<h1>I move with the arrow keys</h1>
<div class="bee">
<div class="head">
<div class="antenna left"></div>
<div class="antenna right"></div>
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="body">
<div class="left">
<div class="part1"></div>
<div class="part2"></div>
</div>
<div class="right">
<div class="part1"></div>
<div class="part2"></div>
</div>
</div>
</div>
:root {
--x: 0px;
--y: 0px;
}
body {
overflow: hidden;
background: #e2062c;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1 {
text-align: center;
font-size: 1.5rem;
}
.bee {
position: relative;
width: 160px;
height: 160px;
transform: translate(var(--x), var(--y));
transition: all 0.2s;
animation: bob ease-in-out 2.5s infinite;
/*head*/
.head {
display: block;
z-index: 2;
top: 10%;
left: -15%;
position: absolute;
width: 60%;
height: 60%;
border-radius: 100%;
background: #000;
/*antenna*/
.antenna {
position: absolute;
background: #000;
width: 15%;
height: 50%;
border-radius: 10px;
top: -32%;
transform-origin: bottom left;
&.left {
left: 26%;
animation: leftantenna 1.5s ease-in-out infinite;
}
&.right {
right: 20%;
transform: rotate(20deg);
animation: rightantenna 1.5s ease-in-out infinite;
}
}
/*eyes*/
.eye {
position: absolute;
background: #fff;
width: 40%;
height: 45%;
border-radius: 100%;
&::after {
content: "";
position: absolute;
left: 25%;
top: 25%;
width: 50%;
height: 50%;
background: #000;
border-radius: 100%;
}
&.left {
left: -15%;
top: 20%;
transform: scale(0.6, 1);
}
&.right {
right: 0;
top: 20%;
}
}
}
.body {
position: relative;
border-radius: 100%;
width: 70%;
height: 70%;
background: #000;
&::before,
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #f2ea00;
border-radius: 100%;
}
&::before {
transform: scale(90%) translate(-15px, 5px);
z-index: 1;
}
&::after {
transform: translate(15px, -5px);
z-index: -1;
}
/* Wings */
.left,
.right {
position: absolute;
width: 100%;
z-index: 0;
.part1,
.part2 {
width: 30px;
height: 100px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.4),
rgba(255, 255, 255, 0.8),
#ccc
);
position: absolute;
border-radius: 50%;
}
}
.left {
left: 10%;
bottom: 70%;
animation: leftwing linear 0.15s infinite;
.part1,
.part2 {
top: 0;
left: 0;
transform-origin: top left;
}
.part1 {
transform: rotate(140deg);
}
.part2 {
transform: rotate(120deg);
opacity: 0.8;
}
}
.right {
bottom: 70%;
right: 20%;
animation: rightwing linear 0.15s infinite;
.part1,
.part2 {
top: 0;
right: 0;
transform-origin: top right;
}
.part1 {
transform: rotate(260deg);
}
.part2 {
transform: rotate(240deg);
opacity: 0.8;
}
}
}
}
@keyframes bob {
0%,
100% {
top: 0;
}
40% {
top: 40px;
}
}
@keyframes rightwing {
0%,
100% {
transform: rotate(20deg);
}
50% {
transform: rotate(-40deg);
}
}
@keyframes leftwing {
0%,
100% {
transform: rotate(-20deg);
}
50% {
transform: rotate(40deg);
}
}
@keyframes leftantenna {
0%,
100% {
transform: rotate(5deg);
}
60% {
transform: rotate(20deg);
}
}
@keyframes rightantenna {
0%,
100% {
transform: rotate(20deg);
}
60% {
transform: rotate(30deg);
}
}
View Compiled
const bee = document.querySelector(".bee");
const root = document.querySelector(":root");
let activeKey;
let xAxis = 0;
let yAxis = 0;
document.addEventListener("keydown", move);
function move(e) {
e.preventDefault();
//if (activeKey == e.keyCode) return;
activeKey = e.keyCode;
//left
if (e.keyCode == 37) {
xAxis = xAxis - 15;
console.log("start moving LEFT");
}
//top
else if (e.keyCode == 38) {
yAxis = yAxis - 15;
console.log("start moving UP");
}
//right
else if (e.keyCode == 39) {
xAxis = xAxis + 15;
console.log("start moving RIGHT");
}
//bottom
else if (e.keyCode == 40) {
yAxis = yAxis + 15;
console.log("start moving DOWN");
}
console.log(xAxis + ", " + yAxis);
root.style.setProperty("--x", xAxis + "px");
root.style.setProperty("--y", yAxis + "px");
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.