La durata dell'animazione dovrebbe essere relativa all'altezza e alla larghezza

Ho un div la cui altezza e larghezza saranno dinamiche. Sto cercando di avere un bordo di animazione tratteggiato su quel div. Il problema che sto affrontando è che la durata dell'animazione non è relativa all'altezza e alla larghezza. vale a dire qualsiasi altezza e larghezza la sua animazione dovrebbe essere alla stessa velocità in tutti gli angoliLa durata dell'animazione dovrebbe essere relativa all'altezza e alla larghezza

.dynamic { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 300px; 
 
    overflow: hidden 
 
    } 
 
    .dynamic::before { 
 
    animation: slideDash 2.5s infinite linear; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 0; 
 
    right: 0; 
 
    outline: 1px dashed #fff; 
 
    box-shadow: 0 0 0 1px rgb(23, 163, 102); 
 
    width: 200%; 
 
    } 
 
    .dynamic::after { 
 
    animation: slideDash 2.5s infinite linear reverse; 
 
    position: absolute; 
 
    content: ''; 
 
    right: 0; 
 
    bottom: 0; 
 
    outline: 1px dashed #fff; 
 
    left: 0; 
 
    box-shadow: 0 0 0 1px rgb(23, 163, 102); 
 
    width: 200%; 
 
    } 
 
    .dynamic div::before { 
 
    animation: slideDashRev 2.5s infinite linear reverse; 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0; 
 
    bottom: 0; 
 
    outline: 1px dashed #fff; 
 
    box-shadow: 0 0 0 1px rgb(23, 163, 102); 
 
    height: 200%; 
 
    } 
 
    .dynamic div::after { 
 
    animation: slideDashRev 2.5s infinite linear; 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0; 
 
    bottom: 0; 
 
    outline: 1px dashed #fff; 
 
    right: 0; 
 
    box-shadow: 0 0 0 1px rgb(23, 163, 102); 
 
    height: 200%; 
 
    } 
 
    @keyframes slideDash { 
 
    from { 
 
     transform: translateX(-50%); 
 
    } 
 
    to { 
 
     transform: translateX(0%); 
 
    } 
 
    } 
 
    @keyframes slideDashRev { 
 
    from { 
 
     transform: translateY(-50%); 
 
    } 
 
    to { 
 
     transform: translateY(0%); 
 
    } 
 
    }

<div class="dynamic"> 
 
    <div></div> 
 
</div>

fonte

2016-02-29 Santhosh Kumar

Provare a cambiare l'altezza e la larghezza del genitore. puoi vedere che la velocità di animazione varia. Capisco il suo bcoz della durata pari. Ma c'è comunque da superare questo –

Umm, può essere coinvolto JS? Se la larghezza e l'altezza non sono uguali, non dovrebbero avere uguale durata dell'animazione. – Passerby

Prova sotto snippet.

.dynamic { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    color: green; 
 
} 
 
.dynamic .line { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.dynamic .line:nth-of-type(1) { 
 
    -webkit-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
.dynamic .line:nth-of-type(2) { 
 
    -webkit-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    margin-left: -164px; 
 
    /* margin-left=(minus)((height+width)/2)-(border-width) */ 
 
} 
 
.dynamic .line:nth-of-type(3) { 
 
    -webkit-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.dynamic .line:nth-of-type(4) { 
 
    -webkit-transform: rotate(270deg); 
 
    -ms-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
    margin-left: 164px; 
 
    /* margin-left=((height+width)/2)-(border-width) */ 
 
} 
 
.dynamic .line i { 
 
    left: 0; 
 
    top: 0; 
 
    width: 200%; 
 
    display: block; 
 
    position: absolute; 
 
    border-bottom: 1px dashed; 
 
    -webkit-animation: move 2.5s infinite linear reverse; 
 
    animation: move 2.5s infinite linear reverse; 
 
} 
 
.dynamic .text { 
 
    width: 100%; 
 
    line-height: 30px; 
 
    display: block; 
 
    text-align: center; 
 
    position: absolute; 
 
    font-size: 18px; 
 
} 
 
@-webkit-keyframes move { 
 
    from { 
 
    -webkit-transform: translateX(0%); 
 
    transform: translateX(0%); 
 
    } 
 
    to { 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    } 
 
} 
 
@keyframes move { 
 
    from { 
 
    -webkit-transform: translateX(0%); 
 
    transform: translateX(0%); 
 
    } 
 
    to { 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    } 
 
}

<body> 
 
    <div class="dynamic"> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="text">Some text here</div> 
 
    </div> 
 

 
</body>

fonte

2016-02-29 10:00:22 Pugazh

http://www.cssscript.com/demo/neon-style-rotating-borders-with-pure-css-css3/ Già segnalato questo collegamento. Questo non mi va bene dato che ho larghezza e altezza dinamiche –

.dynamic { 
    position: absolute; 
    height: 50px; 
    width: 50px; 
    overflow: hidden 
}

avente le stesse dimensioni del height ee width rende la velocità di animazione stesso.

Nota: è possibile sostituire lo 50 con qualsiasi dimensione di propria scelta.

fonte

2016-02-29 10:44:36 Tanah

nel mio caso varia –

Basta correggere la direzione dell'animazione

.dynamic { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    color: red; 
 
} 
 
.dynamic .line { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.dynamic .line:nth-of-type(1) { 
 
    -webkit-transform: rotate(0deg); 
 
    -ms-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
} 
 
.dynamic .line:nth-of-type(2) { 
 
    -webkit-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    margin-left: -164px; /* margin-left=(minus)((height+width)/2)-(border-width) */ 
 
} 
 
.dynamic .line:nth-of-type(3) { 
 
    -webkit-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.dynamic .line:nth-of-type(4) { 
 
    -webkit-transform: rotate(270deg); 
 
    -ms-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
    margin-left: 164px; /* margin-left=((height+width)/2)-(border-width) */ 
 
} 
 
.dynamic .line:nth-of-type(1) i, .dynamic .line:nth-of-type(3) i { 
 
    -webkit-animation: move 2.5s infinite linear reverse; 
 
    animation: move 2.5s infinite linear reverse; 
 
} 
 
.dynamic .line:nth-of-type(2) i, .dynamic .line:nth-of-type(4) i { 
 
    -webkit-animation: move 2.5s infinite linear; 
 
    animation: move 2.5s infinite linear; 
 
} 
 
.dynamic .line i { 
 
    left: 0; 
 
    top: 0; 
 
    width: 200%; 
 
    display: block; 
 
    position: absolute; 
 
    border-bottom: 1px dashed; 
 
} 
 
.dynamic .text { 
 
    width: 100%; 
 
    line-height: 30px; 
 
    display: block; 
 
    text-align: center; 
 
    position: absolute; 
 
    font-size: 18px; 
 
} 
 
@-webkit-keyframes move { 
 
    from { 
 
    -webkit-transform: translateX(0%); 
 
    transform: translateX(0%); 
 
    } 
 
    to { 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    } 
 
} 
 
@keyframes move { 
 
    from { 
 
    -webkit-transform: translateX(0%); 
 
    transform: translateX(0%); 
 
    } 
 
    to { 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    } 
 
}

<body> 
 
    <div class="dynamic"> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="line"><i></i> 
 
    </div> 
 
    <div class="text">Same Direction!!</div> 
 
    </div> 
 

 
</body>

fonte

2016-12-07 16:30:29

La durata dell'animazione dovrebbe essere relativa all'altezza e alla larghezza

risposta

Problemi correlati