CSS动画 - 将放大镜图标变为交叉

我想通过以下示例使用CSS动画将放大镜转换为十字图标。这是我第一次使用动画，我无法弄清楚如何把手柄放在放大镜下面。这里是fiddle。这是原来的demo。这是HTML：CSS动画 - 将放大镜图标变为交叉

<div id="magnifier"> 

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

这是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); } 
}

我如何能做到这一点，我已经改变top和left性能magnifier-handle-x值尝试，但没有帮帮我。

来源

2017-08-28 Leff

https://jsfiddle.net/j624wsas/12/将工作？你可以检查 –

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

这是原始的演示，这是我想要复制的，只是较小的图标大小。 https://codepen.io/thusslack/pen/vEYxoE?page=1& – Leff

更改一些你的@keyframes css代码根据更新的小提琴https://jsfiddle.net/j624wsas/16/。

来源

2017-08-28 08:49:58 kravisingh

您发送的小提琴仍然具有远离玻璃的手柄，这是我想要实现的：https://codepen.io/thusslack/pen/vEYxoE？page = 1＆ – Leff

检查更新的小提琴 - https://jsfiddle.net/j624wsas/16/。 – kravisingh

CSS动画 - 将放大镜图标变为交叉

回答

相关问题