我正试图为角色技能创建像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)}]])