Beiträge von MrMops

MrMops · 5. Mai 2019

Zitat von basti1012

hast du dazu auch das passende html ?

Keiner hat lust das alles selbst zusammen zu bauen

HTML

<!DOCTYPE html>

<html lang="en">    <head>        <meta charset="utf-8" />        <title>Impressum</title>        <link rel="stylesheet" type="text/css" href="style.css"/>    </head>    <body>    	<div class="container">
	
	<div class="bird-container">
		<div class="bird"></div>
	</div>

</div>        <div class="topnav">        <a href="index.html">Startseite</a>        <a href="history.html">Geschichte</a>        <a href="ki.html">Künstliche Intelligenz</a>        <a href="society.html">Auswirkungen auf die Gesellschaft</a>        </div>        <section>            <h1>Literaturverzeichnis</h1>            <p id="srcs">                - <a href="https://www.finanzen.net/special/robotics/wissen/geschichte-der-robotik-588">https://www.finanzen.net/special/robotics/wissen/geschichte-der-robotik-588</a>                </br>                - <a href="https://www.spektrum.de/thema/kuenstliche-intelligenz/1301266">https://www.spektrum.de/thema/kuenstliche-intelligenz/1301266</a>                </br>                - <a href="https://www.distrelec.de/current/de/automatisierung/roboter-und-die-zukunft-der-arbeit/">https://www.distrelec.de/current/de/automatisierung/roboter-und-die-zukunft-der-arbeit/</a>                </br>                - <a href="https://www.creativebloq.com/inspiration/css-animation-examples">https://www.creativebloq.com/inspiration/css-animation-examples</a>        			 </br>        </section>
		<section>
			<h1>Kontaktdaten</h1>
			<p id="srcs">
				Betreiber der Website: Justin Hagemann <br />
				Adresse: <br />
				Justin Hagemann <br />
				Walther Bothe Straße 42 <br />
				13377 Berlin <br />
			</p>
		</section>        <div class="footer">            <a class="active" href="impressum.html">Impressum</a>        </div>    <body style="background-color:grey;">    </body>
</html>

Alles anzeigen

MrMops · 5. Mai 2019

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

Beiträge von MrMops

Vogel Animieren

Vogel Animieren