Text umfließen lassen.

[toxicwave]

Hallo folgendes Problem ist bei mir nun aufgetaucht.
Ich möchte gern per CSS zwei Bilder durch einen Text laufen lassen und diese vom Text umfließen lassen allerdings "fahren" die einfach nur rüber, ohne den Text zu verschieben.

Quellcode:


.flugzeug{

float:right;
clear:right;
margin-bottom:0%;
background-color:transparent;
border-radius: 18px;
width:10%;
height:10%;
animation-name:flugzeugf;
animation-duration: 8s;
animation-iteration-count: infinite;
shape-outside: polygon(10%);

}
.blitz{
float:right;
clear:right;
margin-bottom:0%;
background-color:transparent;
border-radius:18px;
width:10%;
animation-name:blitz;
animation-duration:8s;
animation-iteration-count:infinite;
shape-outside:circle(10%);
}

@keyframes flugzeug{



0% {transform: translateX(-100%);
shape-outside: polygon(10%);

}

100% {
transform: translateX(-500%);
shape-outsideolygon(10%);

}


}
@keyframes blitz{
0%{
transform:translateX(0%);
shape-outside:circle(10%);

}
100%{
transform:translateX(-400%);
shape-outside:circle(10%);

}
}

Vielen Dank schonmal!!

 

[MrMurphy]

Hallo,

mit float können Bilder entweder links oder rechts vom Text umflossen werden.

Wenn Bilder beitig von Text umflossen werden sollen muss entweder mit CSS getrickst werden oder eine Anwendung mit JavaScript geschrieben werden. Solche Lösungen sind aber hinderlich beim flexiblen und / oder responsive Layout und werden deshalb eher vermieden.

Ich habe folgende Anleitung gefunden:

http://www.ohne-css.gehts-gar.net/0062.php

Gruss

MrMurphy