Animations CSS - tourner l'icône de la loupe en croix

J'essaie de faire une transition de loupe en icône croisée avec des animations CSS en suivant un exemple. C'est la première fois que je travaille avec des animations et je n'arrive pas à comprendre comment mettre la poignée sous la loupe. Voici le fiddle. Et ceci est le demo de l'original. Ce est le code html:Animations CSS - tourner l'icône de la loupe en croix

<div id="magnifier"> 

    <div class="magnifier-icon"> 
    <span class="magnifier-handle"></span> 
    <span class="magnifier-handle-x"></span> 
    </div> 
</div>

Et voici le css:

// vars 
$color-white: #fff;  // icon color 
$color-bg: #b0e1be; // background color 
$animation: .5s; // animation speed 
$scale: 0.1;    // icon scale 68/68 default 

$dimensions-open: 28px; 
$dimensions-close: 36px; 


*, *:before, *:after { 
    box-sizing: border-box; 
} 

// spacing + background-color 
body { 
    background: $color-bg; 
    padding: 40px; 
    font-family: roboto, sans-serif; 
} 

.magnifier-icon { 
    display: block; 
    position: relative; 
    cursor: pointer; 
    opacity: 1; 
    transition: opacity 2s; 

    &:before { 
    content: ""; 
    display: block; 
    border: 3px solid $color-white; 

    width: $dimensions-open; 
    height: $dimensions-open; 
    border-radius: $dimensions-open*.5; 

    animation: open $animation ease 0s 1 forwards; 
    } 

    &.is-open:before {  
    animation: close $animation*.5 ease $animation*.5 1 forwards; 
    } 
} 

.magnifier-handle, 
.magnifier-handle-x { 
    content: ""; 
    display: block; 
    width: 25px; 
    height: 3px; 
    transform: rotate(45deg); 
    background: $color-white; 
    position: absolute; 
    top: 85px; 
    left: 45px; 
    animation: x-stroke-out $animation ease 0s 1 forwards; 

    .is-open & { 
    animation: x-stroke-in $animation ease 0s 1 forwards; 
    } 
} 
.magnifier-handle-x { 
    animation: x-stroke-turn-out $animation ease 0s 1 forwards; 
    .is-open & { 
    animation: x-stroke-turn $animation ease 0s 1 forwards; 
    } 
} 

@keyframes close { 
    0% { border-radius: $dimensions-open*.5; width: $dimensions-open; height: $dimensions-open; } 
    80% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
    100% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
} 
@keyframes open { 
    0% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
    20% { border-radius: $dimensions-close*.5; width: $dimensions-close; height: $dimensions-close; } 
    100% { border-radius: $dimensions-open*.5; width: $dimensions-open; height: $dimensions-open; } 
} 

@keyframes x-stroke-in { 
    0% { top: 45px; left: 35px; } 
    80% { top: 33px; left: 15px; width: 40px; height: 4px; } 
    100% { top: 33px; left: 15px; width: 40px; height: 4px; } 
} 
@keyframes x-stroke-out { 
    100% { top: 45px; left: 35px; } 
    30% { top: 33px; left: 15px; width: 40px; height: 4px; } 
    0% { top: 33px; left: 15px; width: 40px; height: 4px; } 
} 

@keyframes x-stroke-turn { 
    0% { top: 45px; left: 35px; } 
    70% { top: 33px; left: 15px; height: 4px; transform: rotate(45deg); } 
    85% { transform: rotate(145deg); } 
    100% { top: 33px; left: 15px; height: 4px; width: 40px; transform: rotate(135deg); } 
} 
@keyframes x-stroke-turn-out { 
    100% { top: 45px; left: 35px; } 
    30% { top: 33px; left: 15px; height: 4px; transform: rotate(45deg); } 
    15% { transform: rotate(145deg); } 
    0% { top: 33px; left: 15px; height: 4px; width: 40px; transform: rotate(135deg); } 
}

Comment puis-je faire cela, je l'ai essayé en changeant les valeurs de top et left propriétés magnifier-handle-x mais cela n'a pas Aidez-moi.

Source

2017-08-28 Leff

https://jsfiddle.net/j624wsas/12/ cela fonctionnera-t-il? pouvez-vous s'il vous plaît vérifier –

https://jsfiddle.net/j624wsas/14/ –

Ceci est la démo de l'original, qui est ce que je veux reproduire, juste avec une plus petite taille d'icône. https://codepen.io/thusslack/pen/vEYxoE?page=1& – Leff

Modifiez certains de vos codes css @keyframes en fonction du violon mis à jour https://jsfiddle.net/j624wsas/16/.

Source

2017-08-28 08:49:58 kravisingh

Le violon que vous avez envoyé a toujours la poignée loin de la vitre, c'est ce que je veux atteindre: https://codepen.io/thusslack/pen/vEYxoE? page = 1 & – Leff

Vérifiez le violon mis à jour- https://jsfiddle.net/j624wsas/16/. – kravisingh

Animations CSS - tourner l'icône de la loupe en croix

Répondre

Questions connexes