Draw div Grenzen mit CSS oder JQuery

Question

Mein Ziel ist es, eine gewisse Animation zu den Rändern meiner div-Elemente auf einer meiner Webseiten hinzuzufügen.

Ich frage mich, wie ich über das Zeichnen/Animieren von Grenzen für meine Liste von Divs auf einem onHover Ereignis gehen würde.

Ist dies mit JQuery oder CSS3 möglich?

Answer 1

Zunächst einmal würde ich empfehlen, CSS für Animationen zu verwenden, außer Sie arbeiten mit (sehr) altem Browser, und selbst dann würde ich generell nur auf JS zurückgreifen, wenn die Animation für die Seite notwendig ist.

Sie können mit einem einfachen CSS Übergang Basisanimation tun:

.example{ 
 
    border: 2px solid #dd0; 
 
    
 
    -moz-transition: border linear 1s; 
 
    -o-transition: border linear 1s; 
 
    -webkit-transition: border linear 1s; 
 
    transition: border linear 1s; 
 
} 
 
.example:hover{ 
 
    border: 2px solid #000 
 
}

<div class="example">This is some text</div>

Es gibt auch komplexere Methoden, die Sie könnten versuchen, such as this die Keyframes verwendet eine gestrichelte Grenze zu animieren. Beispiel unten (genommen und von diesem tutorial modifiziert):

.animation-examples { 
 
    width: 600px; 
 
    height: 120px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: cambria; 
 
    color: #69D2E7; 
 
    outline: 10px dashed #E0E4CC; 
 
    box-shadow: 0 0 0 10px #69D2E7; 
 
} 
 

 
.animation-examples.one:hover { 
 
    animation: 1s animateBorderOne ease infinite; 
 
} 
 

 
@keyframes animateBorderOne { 
 
    0% { 
 
    outline-color: #E0E4CC; 
 
    box-shadow: 0 0 0 10px #69D2E7; 
 
    } 
 
    50% { 
 
    outline-color: #69D2E7; 
 
    box-shadow: 0 0 0 10px #E0E4CC; 
 
    } 
 
    100% { 
 
    outline-color: #E0E4CC; 
 
    box-shadow: 0 0 0 10px #69D2E7; 
 
    } 
 
}

<div id="animation-examples"> 
 
    <div class="animation-examples one"> 
 
    Sample Text 
 
    </div> 
 
</div>

Answer 2

Eine Lösung ist CSS Animations zu verwenden. Es funktioniert im Wesentlichen auf Keyframes.

Hier ist Ihr div:

<div> 
What a test. 
</div> 

Jetzt ist Ihre CSS:

div { 
    border: 3px solid black; 
} 

div:hover { 
    animation-duration: 1s; 
    animation-name: color; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

@keyframes color { 
    0% { 
    border-color: darkred; 
    } 
    100% { 
    border-color: orange; 
    } 

} 

Dieses Beispiel weit von einem inspiriert fand ich (vielleicht in SO). Geige here. Weitere Beispiele here.