Question

我试图通过以下示例将放大镜过渡到带有CSS动画的交叉图标。这是我第一次使用动画，我无法弄清楚如何将手柄放在放大镜下面。这是fiddle。这是原作的demo。这是html：

<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的值，但这没有帮助。

Answer 1

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

CSS动画 - 将放大镜图标变成十字架

1 个答案: