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

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

  •  0
  • Ertuğrul Çetin  · 技术社区  · 2 年前

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

    Skill loadin overlay

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

    enter image description here

    有什么办法吗,谢谢!

    来源于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 年前
        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>
        2
  •  0
  •   Michael Schmitt    2 年前

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

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