How to make a block appear when you press the up arrow?

Question

css

I have such code.

<div class="map">
    <div class="airplane"></div>
    <div class="point point_1"></div>
    <div class="point point_2"></div>
    <div class="point point_3"></div>
    <div class="point point_4"></div>
    <div class="point point_5"></div>
    <div class="point point_6"></div>
</div>

@-webkit-keyframes pulsing {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5)
  }
  50% {
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
  100% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
  }
}

@keyframes pulsing {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5)
  }
  50% {
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
  100% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
  }
}
.map {
            position: relative;
            overflow: hidden;
            max-width: 1200px;
            height: 675px;
            margin: 20px auto;
            background-size: cover;
            border: 1px solid #ccc;
        }

.airplane {
            position: absolute;
            width: 50px;
            height: 50px;
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUxMS45OTIgNTExLjk5MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjk5MiA1MTEuOTkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRjVGN0ZBOyIgcG9pbnRzPSIyNTcuOTk1LDM2Ny4zMSAxNTkuMzMzLDQyOS4zMDggMTU5LjMzMyw0NjguNjg0IDIxNC42NjcsNDUxLjk5NiAyOTEuMzM4LDQ0OS45OTYgDQoJCTM1MS4zMzcsNDY1Ljk5NiAzNTEuMzM3LDQyOS4zMDggCSIvPg0KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNGNUY3RkE7IiBwb2ludHM9IjI5OS45OTQsMTgyLjQ5NCAxOTkuNDk2LDE4OS40OTMgMTEsMjgzLjUgMTUuNDk5LDMyOS40OTggMjU1Ljk5NSwyODYgNTA0Ljk5LDMyOS40OTggDQoJCTUwNC45OSwyODYgCSIvPg0KPC9nPg0KPHBvbHlnb24gc3R5bGU9ImZpbGw6IzRGQzJFOTsiIHBvaW50cz0iMjkxLjk5NCw2NC4wMjcgMjc1LjMzOSwzNy4zNTYgMjQ5LjMzMSwzNC4wMjggMjMxLjMzMSw0Ni42ODQgMjE0LjY2Nyw4Ni42ODMgDQoJMjIzLjUwMyw0NjguNjg0IDI4Ny41MSw0NjguNjg0IDI5Ni42NjYsMTE3LjM1NCAiLz4NCjxnPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiMwODA4MDg7IiBkPSJNMjg2LjgyMyw5Mi4yMjljLTAuNDY5LTEuMjM0LTIuMzc1LTUuNTkzLTcuMjk3LTkuNzM0Yy00LjI1LTMuNTYyLTExLjg2Ny03LjgyOC0yNC4wMTYtNy44MjgNCgkJYy0xOS40NzYsMC0yOC44NDMsMTEuMDQ3LTMxLjMxMiwxNy41NjJjLTIuMDg2LDUuNTE2LDAuNjk1LDExLjY3Miw2LjIwMywxMy43NWM1LjM1OSwyLjAxNiwxMS4zMjgtMC41NDcsMTMuNTctNS43NjYNCgkJYzAuMzc1LTAuNjU2LDIuODItNC4yMTksMTEuNTM5LTQuMjE5YzguNzExLDAsMTEuMTU2LDMuNTYyLDExLjUzOSw0LjIxOWMxLjcxOSw0LDUuNjMzLDYuNDUzLDkuNzg5LDYuNDUzDQoJCWMxLjI1LDAsMi41MzEtMC4yMTksMy43ODEtMC42ODhDMjg2LjEyLDEwMy45MDEsMjg4LjksOTcuNzQ1LDI4Ni44MjMsOTIuMjI5eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiMwODA4MDg7IiBkPSJNNTA2LjE0NiwyNzguNWwtNDcuNDk5LTI0LjEwMnYtNi4wNjJjMC01LjkwNi00Ljc2Ni0xMC42NzItMTAuNjU2LTEwLjY3Mg0KCQljLTQuMzU5LDAtOC4xMDksMi42MDktOS43NSw2LjM1OWwtNDMuNTkzLTIyLjA5M3YtNS41YzAtNS44NzUtNC43NjYtMTAuNjU2LTEwLjY1NS0xMC42NTZjLTQuMTg4LDAtNy43ODEsMi40MDYtOS41MzEsNS45MDYNCgkJbC02Ny42NzEtMzQuMzEyYzEuMjAzLTQzLjEyNCwyLjA0Ny03NS4yOCwyLjA0Ny04MS4zNzRjMC0xMy4zNDMtNS4wNjItMzEuMDc4LTEyLjg3NS00NS4xNzENCgkJYy0xMC41NjItMTkuMDE1LTI0LjkyOS0yOS40ODQtNDAuNDUyLTI5LjQ4NHMtMjkuODgyLDEwLjQ2OS00MC40NDUsMjkuNDg0Yy03LjgyOCwxNC4wOTMtMTIuODksMzEuODI4LTEyLjg5LDQ1LjE3MQ0KCQljMCw2LjEyNSwwLjg1MiwzOC41LDIuMDcsODEuODQybC02Ni43MSwzMy44NDNjLTEuNzUtMy41LTUuMzU5LTUuOTA2LTkuNTM5LTUuOTA2Yy01Ljg5MSwwLTEwLjY2NCw0Ljc4MS0xMC42NjQsMTAuNjU2djUuNQ0KCQlsLTQzLjU3NywyMi4wOTNjLTEuNjU2LTMuNzUtNS4zOTgtNi4zNTktOS43NTgtNi4zNTljLTUuODksMC0xMC42NjQsNC43NjYtMTAuNjY0LDEwLjY3MnY2LjA2Mkw1Ljg0NCwyNzguNQ0KCQlDMi4yNTgsMjgwLjMxMiwwLDI4My45NjksMCwyODh2NDIuNjU0YzAsMy4yMTksMS40NDUsNi4yNSwzLjkzOCw4LjI4MWMxLjkxNCwxLjU2Miw0LjI5NywyLjQwNiw2LjcyNywyLjQwNg0KCQljMC43MjcsMCwxLjQ1My0wLjA5NCwyLjE3MS0wLjIxOWwxOTQuOTU4LTQwLjU2MWMwLjgwNSwyNy4zMTEsMS42MDIsNTQuMTIzLDIuMzIsNzguMDYxbC01Ni4yMjYsMzkuMzExDQoJCWMtMi44NTksMS45NjktNC41NTUsNS4yNS00LjU1NSw4LjcxOXY0Mi42ODhjMCwzLjQzOCwxLjY1Niw2LjY1Niw0LjQ1Myw4LjY1NmMxLjgzNiwxLjMxMiw0LjAwOCwyLDYuMjExLDINCgkJYzEuMTQ4LDAsMi4zMDUtMC4xODgsMy40MjktMC41NjJsNDkuMjEtMTYuNjg4YzAuMTA5LDMuNTk0LDAuMTgsNS45NjksMC4yMTEsNi45MDZjMC4xNzIsNS43NSw0Ljg5OCwxMC4zNDQsMTAuNjY0LDEwLjM0NGgyMS4zMzUNCgkJbDAsMGMwLDUuOTA2LDQuNzczLDEwLjY1NiwxMC42NjQsMTAuNjU2YzUuODkxLDAsMTAuNjY0LTQuNzUsMTAuNjY0LTEwLjY1NmwwLDBoMjEuMzM1YzUuNzY2LDAsMTAuNDg0LTQuNTk0LDEwLjY3Mi0xMC4zNDQNCgkJYzAuMDE2LTAuOTY5LDAuMDk0LTMuNDY5LDAuMjE5LTcuMjVsNTAuMTU1LDE3LjAzMWMxLjEyNSwwLjM3NSwyLjI4MSwwLjU2MiwzLjQzOCwwLjU2MmMyLjIwMywwLDQuMzc1LTAuNjg4LDYuMjE5LTINCgkJYzIuNzgxLTIsNC40MzgtNS4yMTksNC40MzgtOC42NTZ2LTQyLjY4OGMwLTMuNDY5LTEuNjg4LTYuNzUtNC41NDctOC43MTlsLTU3LjE3MS0zOS45OThjMC43MDMtMjMuODEyLDEuNS01MC40MzgsMi4yOTctNzcuNTYxDQoJCWwxOTUuOTE4LDQwLjc0OGMwLjcxOSwwLjEyNSwxLjQ1MywwLjIxOSwyLjE4OCwwLjIxOWMyLjQyMiwwLDQuODEyLTAuODQ0LDYuNzE5LTIuNDA2YzIuNS0yLjAzMSwzLjkzOC01LjA2MiwzLjkzOC04LjI4MVYyODgNCgkJQzUxMS45OSwyODMuOTY5LDUwOS43NCwyODAuMzEyLDUwNi4xNDYsMjc4LjV6IE0zNDEuMzM3LDQzMi4yMTV2MjIuMjE5bC00MS4zNDMtMTRsMS4wNjItMzYuMzczTDM0MS4zMzcsNDMyLjIxNXogTTIxLjMzNSwzMTcuNTYNCgkJdi0yMi45OThMMjA0LjkxLDIwMS40M2MwLjY5NSwyNC4yOTYsMS40NjksNTAuODQzLDIuMjUsNzcuNDc2TDIxLjMzNSwzMTcuNTZ6IE0xNzAuNjYxLDQ1NC40MzR2LTIyLjIxOWw0MC4yMTgtMjguMTIzDQoJCWMwLjQxNCwxMy45MDQsMC43ODEsMjYuMjE3LDEuMDg2LDM2LjM0MkwxNzAuNjYxLDQ1NC40MzR6IE0yNjYuMTc1LDQ1OC42NTJ2LTUzLjMxMWMwLTUuOTA2LTQuNzczLTEwLjY4OC0xMC42NjQtMTAuNjg4DQoJCXMtMTAuNjY0LDQuNzgxLTEwLjY2NCwxMC42ODh2NTMuMzExaC0xMC45ODRjLTAuMDk0LTIuOTM4LTAuMjAzLTYuNDY5LTAuMzItMTAuNWMwLTAuMTU2LDAuMDA4LTAuMzEyLDAuMDA4LTAuNDY5bC0xLjg2Ny02My45OTgNCgkJYy0wLjAxNi0wLjQwNi0wLjA1NS0wLjgxMi0wLjEwOS0xLjIxOWMtMy4xNTYtMTA1LjY1NC04LjA2Mi0yNzIuMTktOC4wNjItMjg2LjQ3MmMwLTE4LjAxNSwxNC40ODQtNTMuMzI3LDMyLTUzLjMyNw0KCQlzMzEuOTk5LDM1LjMxMiwzMS45OTksNTMuMzI3YzAsMTguODc1LTguNTc3LDMwNC4zMTUtMTAuMzU4LDM2Mi42NTdMMjY2LjE3NSw0NTguNjUyTDI2Ni4xNzUsNDU4LjY1MnogTTQ5MC42NDYsMzE3LjU2DQoJCWwtMTg2Ljc3Ny0zOC44NDJjMC43ODEtMjYuNzU4LDEuNTYyLTUzLjQxNCwyLjI1LTc3Ljc4OGwxODQuNTI3LDkzLjYzMlYzMTcuNTZ6Ii8+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==") no-repeat;
            transform: rotate(90deg);
            offset-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');
            animation: airplane-fly 13s infinite linear;
          z-index: 2;
        }

        .point {
            position: absolute;
            width: 15px;
            height: 15px;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 50%;
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .05);
        }

        .point_1 {
            top: 323px;
            left: 235px;
        }

        .point_2 {
            top: 615px;
            left: 365px;
        }

        .point_3 {
            top: 240px;
            left: 670px;
        }

        .point_4 {
            top: 340px;
            left: 870px;
        }

        .point_5 {
            top: 535px;
            left: 975px;
        }

        .point_6 {
            top: 535px;
            left: 630px;
        }

        @keyframes airplane-fly {
            0% {
                offset-distance: 0;
            }
            100% {
                offset-distance: 100%;
            }
        }

This is an airplane, I want it to appear only when you press the up arrow on the keyboard. (Like easter eggs) But since I'm a beginner, I don't know how to do it. Thanks in advance

Answer 1

It has to be done via javascript. Add a CSS class to the airplane with display:none, and in the javascript on the onkeypress event and the condition e.key == 'ArrowUp' remove this class.