<div id="container" class="hide">
<div></div>
<div></div>
</div>
html, body {
height: 100%;
margin: 0;
}
body {
font: normal 1em / 1.62em sans-serif;
background-color: #010;
background-image:url( https://i.ibb.co/rMb3jQP/soccer.jpg );
background-repeat:no-repeat;
background-size: 100vw auto;
background-position: center;
}
#button {
position:absolute;
top: -999em;
left: -999em;
}
#button:checked ~ #container div:nth-of-type(1) {
display: block;
}
#button:checked ~ #container div:nth-of-type(2) {
display: block;
}
#button:checked ~ label::before{
content:'hide ';
}
label {
display: block;
width: 8em;
padding: 0.5em 0;
margin: 0.5em auto;
border: 0.3em solid #b5c2c2;
border-radius: 0.5em;
background-color: #fff;
text-align: center;
cursor: pointer;
}
label::before {
content:'show ';
}
#container {
position: fixed;
bottom: 0;
left: 50%;
transform: translate( -50%, 0 );
}
.hide {
display:none;
}
#container div:nth-of-type(1) {
width: 8.75em;
height: 8.75em;
background-image: url( https://i.ibb.co/ZS22388/soccer-ball-png-clip-art-soccer-ball-11563100954keemcoojya.png );
background-size: 35% auto;
background-position: center;
background-repeat: no-repeat;
animation: bounce 2s 1 forwards;
animation-iteration-count: 1;
}
#container div:nth-of-type(2) {
width: 3.124em;
height: 2.25em;
margin-left: 3em;
border-radius: 3.124em;
transform: scaleY( 0.25 );
filter: blur( 0.75em );
background-color: #020;
animation: shadow-scale 2s 1;
animation-iteration-count: 1;
animation-delay: 0.12s;
}
@keyframes bounce {
0% {
margin-bottom: 126px;
animation-timing-function: ease-in;
transform:rotate( 0deg );
}
16% {
margin-bottom: -64px;
animation-timing-function: ease-out;
}
32% {
margin-bottom: 76px;
animation-timing-function: ease-in;
}
48% {
margin-bottom: -64px;
animation-timing-function: ease-out;
}
62% {
margin-bottom: 26px;
animation-timing-function: ease-in;
}
78% {
margin-bottom: -64px;
animation-timing-function: ease-out;
}
90% {
margin-bottom: -24px;
animation-timing-function: ease-in;
}
100% {
margin-bottom:-64px;
animation-timing-function: ease-out;transform:rotate( 360deg );
}
}
@keyframes shadow-scale {
0% {
transform: scale(1) scaleY(0.25);
}
40% {
transform: scale(1) scaleY(0.25);
}
65% {
transform: scale(1) scaleY(0.25);
}
82% {
transform: scale(1) scaleY(0.25);
}
25%,
55%,
75%,
87%,
97%,
100% {
transform: scale(0.75) scaleY(0.25);
animation-timing-function: ease-out;
}
}
@media ( max-width: 39em ) {
body {
background-size: 150vw auto;
}
}
@media ( max-width: 24em ) {
body {
background-size: 250vw auto;
}
}
(function(d) {
'use strict';
d.addEventListener('keydown', function(event) {
if ( event.key==='ArrowUp'){
d.getElementById('container').classList.remove('hide');
}
if ( event.key=='ArrowDown'){
d.getElementById('container').classList.add('hide');
}
}, false);
}(document));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.