代码之家 › 专栏 › 技术社区 › ErtuÄrul Çetin

如何在CSS/JavaScript中创建类似RPG游戏的旋转加载覆盖?

css-animations css javascript

ErtuÄrul Çetin · 技术社区 · 2 年前

我正试图为角色技能创建像RPG游戏中那样的旋转加载覆盖。这里有一个来自魔兽世界的例子(我需要完全像这样);

这是我的尝试(事实证明我的CSS技能并没有那么强大)——正如你所看到的,它看起来很奇怪。

有什么办法吗,谢谢!

来源于ClojureScript,但我想应该没有问题;

(def skill-keyframes-opa
  ((keyframes (j/lit {"0%" {:opacity "1"}
                      "50%, 100%" {:opacity "0"}}))))

(def skill-loading-wrapper
  (css (j/lit {:background :white
               :opacity 0.5
               :z-index 1
               :width 45
               :height 45
               :position :relative
               :top 2
               :left 2})))

(def skill-loading-pie
  (css (j/lit {:width "50%"
               :height "100%"
               :position :absolute
               :transform-origin "100% 50%"
               :background :grey
               :border "10px solid rgba (0, 0, 0, 0.4)"})))

(defn- skill-loading-spinner [duration]
  ((css (j/lit {:border-radius "100% 0 0 100% / 50% 0 0 50%"
                :z-index 200
                :border-right :none
                :animation (str skill-keyframes-rota " " duration "s linear infinite")}))))

(defn- skill-loading-filler [duration]
  ((css (j/lit {:border-radius "0 100% 100% 0 / 0 50% 50% 0"
                :z-index 100
                :border-left :none
                :animation (str skill-keyframes-opa " " duration "s steps(1, end) infinite reverse")
                :left "50%"
                :opacity 0}))))

(defn skill-loading-mask [duration]
  ((css (j/lit {:width "50%"
                :height "100%"
                :position :absolute
                :z-index 300
                :opacity 1
                :background :inherit
                :animation (str skill-keyframes-opa " " duration "s steps(1, end) infinite")}))))

(defn use-skill [duration]
  [:div {:class (skill-loading-wrapper)}
   [:div {:class [(skill-loading-pie) (skill-loading-spinner duration)]}]
   [:div {:class [(skill-loading-pie) (skill-loading-filler duration)]}]
   [:div {:class (skill-loading-mask duration)}]])

1 回复 | 直到 2 年前

Dimava 2 年前

来源:

@属性动画应替换为 style.setProperty('--cooldown', '23.4%') js动画,因为js值是真理的来源

.cooldown {
  /* set via style.setProperty('--cooldown', '23.4%') in js */
  --cooldown: 50%;
  background: conic-gradient(
      transparent 0,
      transparent var(--cooldown),
      rgba(0, 0, 0, 0.5) var(--cooldown),
      rgba(0, 0, 0, 0.5)
  );
  animation: cooldown 1s linear infinite;
}

/* makes --cooldown animateable for css animations */
@property --cooldown {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes cooldown {
  0% { --cooldown: 0%; }
  100% { --cooldown: 100%; }
}

/* makes children be over each other */
.childs-overlayed {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  display: grid;
  grid-template-areas: "only";
}
.childs-overlayed > * {
  grid-area: only;
  height: 100%;
  width: 100%;
}

<div class="childs-overlayed">
  <img src="https://via.placeholder.com/100">
  <div class="cooldown"></div>
</div>

Michael Schmitt 2 年前

您可能希望将左侧的覆盖设置为深色,而不是浅色。奇怪之处可能来自于人们认为较浅的覆盖层实际上是在较暗图标的“顶部”。

如果您改为使用深色(甚至黑色)覆盖,它将更紧密地匹配示例。