Beiträge von AnaElisa

Hallo,

ein Laufband soll je nach Breite @media (max-width: xxx) jeweils unterschiedliche Werte bei 100% /text-indent: ) aufweisen:

-450% für mobile Geräte und -100% für Desktop. Wie muss da die ANleitung lauten?

<style>

@keyframes marquee {

0% { text-indent: 100% }

100% { text-indent: -450% }

}

.marquee {

width: 100%;

margin: auto;

padding: 5px;

overflow: auto;

white-space: nowrap;

border: solid 1px #CCCCCC;

animation: marquee 25s linear infinite;

background-color: rgb(204, 0, 51);

font-size: 18px;

font-weight: bold;

color: #ffffff;

}

.marquee:hover {

animation-play-state: paused;

}

</style>

<p class="marquee">TEXTETXTE TEXT .... .........!</p>

Vielen Dank für Euro Hilfe

AnaLisa

ja, das hat geklappt. Ich bin fasziniert. DANKE!

super, danke. Das hat geholfen.

Hallo zusammen,

ich hoffe, ich bin hier richtig. Ich habe ein Problem mit einer kleinen Animation. Leider kenne ich mich nicht sehr gut damit aus.

Bei folgender Animation sollen die beiden Dreiecke nach der Animation am Endpunkt stehenbleiben und nicht zum Ausgangspunkt zurückkehren. Kann mir da jemand einen Tipp geben. Danke.

<div class="center">
  <div id="dreieck-rot"></div>
  <div id="dreieck-blau"></div>
</div>
<style type="text/css">
.center {
    width: 140px;
   margin-left: auto;
    margin-right:auto;
}

#dreieck-blau {
   width: 0;
   height: 0;
   border-right: 70px solid #a1b7d0;
   border-top: 70px solid  #a1b7d0;
   border-bottom: 70px solid transparent;
       border-left: 70px solid transparent;
    animation: blau 5s;
}
#dreieck-rot {
   width: 0;
   height: 0;
   border-left: 140px solid #ef9c9a;
   border-top: 140px solid transparent;
   border-bottom: 140px solid #ef9c9at;
     border-right: 140px solid transparent;
    top:-140px;
    float:left;
animation: rot 5s;
}
@keyframes blau {
 0% {
        transform: translate(0);
    }
    100% {
        transform: translate(25em);
    }
}

@keyframes rot { 
 0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-25em);
    }
}