Wie kann man Animationen außerhalb von Div mit Clip-Pfad schneiden?

Dies ist eine Nachfolgefrage zu der, die ich gestern gefragt habe.Wie kann man Animationen außerhalb von Div mit Clip-Pfad schneiden?

Mein Ziel war es, eine Box zu erstellen und eine SVG-Grafik durch die Box zu schieben, so dass Sie während der Verschiebung der Grafik nur die Teile der Grafik und die Teile außerhalb der Box sehen würden versteckt. Hier ist der Code, der diese Arbeit gemacht:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
<body> 
    <br><br><br> 
    <div id="mydiv"> 
    <br><br><br> 
    <a id="swipe1";><img src="https://www.benngrant.com/html5/shape1.svg" /></a> 
    <br><br><br><br> 
    </div> 
</body>

CSS:

body {background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; background-size:cover;} 
a#swipe1 {transition-timing-function:linear; position:relative; opacity:.62; top:10px; animation: mymove 7.85s forwards;} 
@keyframes mymove{from {left:-100%;} to {left:150%;}} 
#mydiv {text-align:center; background:black; opacity:.5; max-width:50%; position:relative; margin-left:auto; margin-right:auto; display:block; overflow: hidden; border:1px solid black}

Im Grunde alles, was ich tun musste, war Überlauf hinzufügen: versteckt und position: relative zu #mydiv, damit es funktioniert, worauf hingewiesen wurde. (Ich bekomme warum Überlauf: versteckt ist notwendig, immer noch verwirrt, warum Position: relativ ist, aber na ja.)

Diesmal was ich frage ist das: Gibt es einen alternativen Weg, um den gleichen Effekt mit dem Clip zu erreichen Pfad css-Eigenschaft, um ein Rechteck zu definieren, das jeden Teil der sich bewegenden Grafik ausblendet, der nicht innerhalb des Rechtecks liegt? Kann Clip-Pfad tatsächlich verwendet werden, um zu definieren, wo der Browser die Teile des Bildes, die sich in ihm befinden, zeichnen darf, während sich das Bild nach den Keyframes bewegt? In der Theorie erscheint es mir vernünftig, aber ich bin mir nicht sicher, wie ich damit anfangen soll.

Irgendwelche Gedanken? Verwenden Sie nur HTML und CSS, aber kein JavaScript? Das schafft ein gleiches Ergebnis wie das?

https://jsfiddle.net/91p21odc/

Quelle

2017-12-31 Sindyr

Vielleicht so etwas wie folgt aus:

body { 
 
    background: #ffffff url("https://www.benngrant.com/wp-content/themes/Abstract_Dark1/images/Bottom_texture.jpg") no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 

 
#mydiv { 
 
    margin: 50px 0; 
 
    padding: 40px 0; 
 
} 
 

 
#swipe1 { 
 
    transition-timing-function: linear; 
 
    opacity: .62; 
 
    display: inline-block; 
 
    position: relative; 
 
    animation: mymove 7.85s forwards; 
 
} 
 

 
.clip { 
 
    clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%); 
 
} 
 

 
@keyframes mymove { 
 
    from { 
 
    left: -100%; 
 
    } 
 
    to { 
 
    left: 150%; 
 
    } 
 
} 
 

 
#mydiv { 
 
    text-align: center; 
 
    background: black; 
 
    opacity: .5; 
 
    max-width: 50%; 
 
    position: relative; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: block; 
 
    overflow: hidden; 
 
    border: 1px solid black 
 
}

<div id="mydiv"> 
 
    <div class="clip"> 
 
    <div id="swipe1"> 
 

 
     <img src="https://www.benngrant.com/html5/shape1.svg" /> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-12-31 08:09:42

Interessant. Ich stelle fest, dass das SVG halbiert ist. Ich werde mit deinem Code ein wenig spielen und später antworten - danke! :) – Sindyr

@Sindyr nicht eine Hälfte, aber exaclt 100px;) .. ich machte dies, weil ich nicht klar verstanden habe, was Sie brauchen, also dachte ich, Sie wollen nur den Teil der SVG sichtbar und animieren in den Container –

Ahh , nein, was ich möchte, ist nicht ein/Div, um die Animation abzuschneiden, Clip-Pfad verwenden, um ein Rechteck, wo das animierte SVG erscheinen kann, so dass, wenn es zuerst läuft, wir sehen, die Spitze der Nase der Bild, dann wird das ganze Bild sichtbar, und als es zuerst geht, sehen wir, wie die Nase verschwindet, wenn sie auf den Rand des Rechtecks des Clip-Pfads trifft, dann verschwindet der Rest. Als ob das Clip-Pfad-Rechteck stationär wäre, während sich die Animation durch es bewegt - macht das Sinn? – Sindyr

Wie kann man Animationen außerhalb von Div mit Clip-Pfad schneiden?

Antwort

Verwandte Themen