Hallo hab ein Problem.
Muss morgen ein Projekt abgeben über eine Internetseite, aber möchte eine Animation eines Vogel einbauen.
Auf diesem Bild bewegt sich der Vogel aber nur auf der Stelle.
Ich würde ihn gerne kleiner haben und das er sich nach rechts durchs bild bewegt.
Ist das machbar?
Ab dem smiley geht das mit dem verdammten vogel los ich hoffe ihr könnt helfen. Die div Anweisung ist eigentlich auch angegeben.
Code
body {
margin: 0;
}
#bodymain {
background-image:url("bild.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
.topnav {
background-color: #2E2E2E;
overflow: hidden;
padding: 0.5em;
padding-left: 0;
}
.topnav a {
color: White;
padding: 1.5em;
text-decoration: none;
/* schriftgröße für navigationsleiste*/
font-size: 1.5em;
/**/
font-family: Arial;
}
.topnav a.active {
color: Black;
border-left: 10px solid black;
background-color: #848484;
}
section {
background-color: #585858;
margin: 3em;
}
h1 {
font-family: Arial;
color: White;
font-size: 1em;
margin: 0;
padding: 0.5em;
background-color: #6E6E6E;
}
.footer {
background-color: #000000;
position: fixed;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
}
.footer a{
color: White;
text-align: center;
text-decoration: none;
font-family: Arial;
font-size: 1.5em;
padding-left: 1em;
padding-right: 1em;
}
.footer a.active {
color: Black;
border-left: 10px solid black;
background-color: #848484;
}
p {
font-family: Arial;
color: White;
font-size: 1em;
margin: 0;
padding: 0.5em;
}
#srcs a {
text-decoration: none;
color: white;
}
#mainh1 {
font-family: Arial;
color: White;
font-size: 2em;
margin: 0;
padding: 0.5em;
background-color: #2E2E2E;
}
<img src="https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f61b.png" alt=":P" class="smiley" srcset="https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f61b@2x.png 2x" id="wscSmiley_0_0" height="23"><img src="https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f61b.png" alt=":P" class="smiley" srcset="https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f61b@2x.png 2x" id="wscSmiley_0_1" height="23"><img src="https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f606.png" alt=":D" class="smiley" srcset="https://www.html-seminar.de/forum/ws/images/smilies/emojione/1f606@2x.png 2x" id="wscSmiley_0_2" height="23">@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300');
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-family: 'Arima Madurai', cursive;
color: black;
font-size: 2rem;
letter-spacing: -3px;
position: relative;
z-index: 3;
}
.container {
z-index: 1;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
// min-height: 100vh;
min-height: 22rem;
background-image: linear-gradient(to bottom, rgba(255,168,76,0.6) 0%,rgba(255,123,13,0.6) 100%), url('https://images.unsplash.com/photo-1446824505046-e43605ffb17f');
background-blend-mode: soft-light;
background-size: cover;
background-position: center center;
padding: 2rem;
}
.bird {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells.svg);
background-size: auto 100%;
width: 352px;
height: 500px;
will-change: background-position;
animation-name: fly-cycle;
animation-duration: 1s;
animation-delay: -0.5s;
animation-timing-function: steps(10);
animation-iteration-count: infinite;
}
.bird-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
will-change: transform;
}
@keyframes fly-cycle {
100% {
background-position: -3600px 0;
}
}
Alles anzeigen