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動畫 - 將放大鏡圖標變爲交叉

回答

相關問題