使用CSS制作卷帘手形图标动画

8tntrjer 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(145)

html { background: #4F4F4F; }

.path {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    background: rgba(149, 147, 241, 0.5);
    border-radius: 40px;
    top: 28px;
    left: 78px;
}
.hand-icon {
    position: relative;
    background-image: url('https://i.postimg.cc/8556gm60/hand.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 100px;

    animation: spin 2s infinite;
    transform-origin: 52% 62%;
}
@keyframes spin {
    0% { transform: rotate(30deg); margin-left: 20px; }
    50% { transform: rotate(-15deg); margin-left: -20px; }
    100% { transform: rotate(0deg); margin-left: 20px; }
}

<div class="swipe">
    <div class="path"></div>
    <div class="hand-icon"></div>
</div>

我有一个很好的CSS背景，但我是相当新的CSS@关键帧，即使我不能实现上面的截图。要求是使它无限动画，并显示您可以拖动屏幕从右到左。我所实现的，你可以看到在所附的代码。
我怎样才能结合两个动画，使紫色的路径动画以及手滑动？还有为什么第一步没有动画？这就像跳到30度，然后它去顺利。试图重新与100% { transform: rotate(0deg); margin-left: 20px; }，但id不工作。有人能指出我在正确的方向？
大多数情况下，我希望使用此example的第一个动画

css

来源：https://stackoverflow.com/questions/75586021/swipe-hand-icon-animation-with-css

2条答案

按热度按时间

hivapdat1#

此解决方案完全符合您的需求：

window.onload = () => {
  document.querySelector(".path").style.animation = "swipe-dot 2s 0.5s infinite";
  
  document.querySelector(".hand-icon").style.animation = "swipe-hand 2s infinite";

}

html { background: #4F4F4F; }

.path {
    width: 20px;
    height: 20px;
    position: absolute;
    background: rgba(149, 147, 241, 0.5);
    border-radius: 40px;
    top: 28px;
    left: 78px;
    visibility: hidden;
}

.hand-icon {
    position: relative;
    background-image: url('https://i.postimg.cc/8556gm60/hand.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 100px;

    transform-origin: 52% 62%;
}

@keyframes swipe-hand {
    25% { transform: translate(20px) rotate(30deg); }
    50% { transform: translate(-20px) rotate(-15deg); }
    100% { transform: translate(0px) rotate(0); }
}

@keyframes swipe-dot {
  12% {
    visibility: visible;
    width: 40px;
  }
  25% {
    visibility: visible;
    transform: translate(-65px);
    width: 20px;
  }
  26% { visibility: hidden; }
}

<div class="swipe">
    <div class="path"></div>
    <div class="hand-icon"></div>
</div>

而且是的您需要一点JS，因为我们在启动两个动画之前要等待图像到达浏览器
问候

赞(0）回复(0）举报 2023-03-05

cbjzeqam2#

你可以让蓝色的点也有一个动画，扩大宽度，但保持右手边在同一个地方。
这个代码段假设您不想更改HTML（例如，将两者放在一个容器中），因此它不使用right：0固定右侧。

html {
  background: #4F4F4F;
}

.path {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  background: rgba(149, 147, 241, 0.5);
  border-radius: 40px;
  top: 28px;
  left: 78px;
  animation: expand 2s infinite;
  margin: 0;
  padding: 0;
}

@keyframes expand {
  0% {
    width: 20px;
  }
  50% {
    width: 78px;
    left: 20px;
  }
  100% {
    width: 20px;
  }
}

.hand-icon {
  position: relative;
  background-image: url('https://i.postimg.cc/8556gm60/hand.png');
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  animation: spin 2s infinite;
  transform-origin: 52% 62%;
}

@keyframes spin {
  0% {
    transform: rotate(30deg);
    margin-left: 20px;
  }
  50% {
    transform: rotate(-15deg);
    margin-left: -20px;
  }
  100% {
    transform: rotate(0deg);
    margin-left: 20px;
  }
}

<div class="swipe">
  <div class="path"></div>
  <div class="hand-icon"></div>
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

使用CSS制作卷帘手形图标动画

2条答案

相关问题

热门标签

最新问答