Animieren line-through text mit CSS

Ist es möglich, verwenden Webkit-Animationen/übergänge zu animieren, eine durchgestrichene Linie durch ein Wort von Links nach rechts? Soweit ich sagen kann, ich kann nur machen, fade in/out, nicht animieren, dass er Auffällig dem text heraus.

Jede Hilfe würde geschätzt werden. Danke.

InformationsquelleAutor nbu | 2012-02-13
  1. 6

    Das funktioniert.. (ich hatte zu schweben, nicht sicher, welche Veranstaltung Sie wollen es auslösen)

    html:

    <p>This is <span class='line_wrap'><span class='line'></span>weird</span></p>​

    css:

    span.line_wrap {
    position:relative;
    display:inline-block;        
}
span.line {
    display:inline-block;
    position:absolute;
    left:0;
    top:50%;
    width:0;
    border-top:1px solid grey;
    -webkit-transition: width 0.5s ease-in;
}
span.line_wrap:hover span.line {
    width:100%;    
}​

    Fiedel:
    http://jsfiddle.net/bendog/LXKJU/

    EDIT: Das ist wirklich nur zur Veranschaulichung, es ist möglich... macht schreckliche markup obwohl. Ich würde nicht empfehlen Sie zu verwenden, es...

    EDIT 2: Oder ausgelöst mit Javascript: http://jsfiddle.net/bendog/Kdd7K/

    • vielen Dank, ben. Ihre Hilfe ist bestimmt willkommen.
    • Ben, die beiden jsfiddle snippets sind die gleichen. Ich will nicht, um Ihnen zusätzliche Arbeit, wenn Sie also noch, die javascript-Umsetzung, ich würde es zu schätzen wissen. Wenn nicht, ist es ok.
    • mmm, das ist seltsam, nicht sicher, warum es ist Weg von jsfiddle. Ich habe es nicht mehr, nur experimentiert in jsfiddle.
    • aber im Grunde werden Sie wollen, ändern Sie das :hover auf eine benutzerdefinierte Klasse, und fügen Sie das benutzerdefinierte Klasse on-the-fly mit JS..
    • Ach, stimmt ja, wo war mein Kopf. Danke!
    InformationsquelleAutor Ben
Schreibe einen Kommentar