Hi,
machen gerade aus Spaß DuckHunt in JavaScript, bin nicht sonderlich gut, aber hey, ich versuche es zumindest.
Mein Bild ist aber viel zu groß, geht fast über die halbe Seite, und ich hab keine Ahnung wie ich es schrumpfen kann.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
</script>
<style>
@charset "UTF-8";
@keyframes duckfly {
0% {
left: 150%;
top: 10%;
}
25% {
left: 80%;
top: 50%;
}
50% {
left: 50%;
top: 30%;
}
75% {
left: 30%;
top: 40%;
}
100% {
left: -50%;
top: 10%;
}
}
input+label {
position: absolute;
left: -100px;
width: 36px;
height: 34px;
display: block;
z-index: 5;
transform: translate(-50%, -50%);
background: url(images/Ente2.png) no-repeat left center;
background-position: -138px 0;
}
input:checked+label {
opacity: 0;
transition: all 0.5s;
transform: rotate(120deg);
transform-origin: 60%;
z-index: -5;
}
.duck:nth-last-of-type(1) {
animation: duckfly 10s linear 1s infinite;
animation-direction: alternate;
cursor: url(images/Crosshair.jpg);
}
.score {
position: fixed;
bottom: 0;
height: 50px;
line-height: 50px;
font-size: 30px;
text-align: center;
width: 100%;
z-index: 2;
background-color: #ffffff;
}
.score:after {
content: counter(score);
display: inline-block;
}
.score:before {
content: 'Score :';
display: inline-block;
margin-right: 10px;
}
input:checked {
counter-increment: score;
}
body::before {
content: '';
display: block;
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
background: url(images/landschaft.jpg);
background-size: cover;
}
</style>
</head>
<body>
<input type="checkbox" id="duck1" onclick="document.getElementById('')">
<label for="duck1" class="duck"></label>
<div class="score"></div>
</body>
</html>
Hab den Berech in dem das Bild ist fett markiert.
Danke im Voraus
