[游戏开发]css3 实现一个loading加载动画

实现类似下面的一个loading加载动画

最终实现的css样式

			div {
                position: relative;
                margin: auto;
                width: 100px;
                height: 100px;
                border-radius: 50%;
            }
            @property --per {
                syntax: "<percentage>";
                inherits: false;
                initial-value: 10%;
            }
            div::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 50%;
                /* 圆锥形渐变 */
                background: conic-gradient(transparent, transparent var(--per), #fa7 var(--per), #fa7);
                -webkit-mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000);
                mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000);
                animation: change 3s infinite cubic-bezier(0.57, 0.29, 0.49, 0.76);
            }


            @keyframes change {
                50% {
                    transform: rotate(270deg);
                    --per: 98%;
                }
                100% {
                    transform: rotate(720deg);
                }
            }

conic-gradient

圆锥形渐变:

 background: conic-gradient(transparent, transparent var(--per), #fa7 var(--per), #fa7)

radial-gradient

径向渐变,目的去除圆锥形渐变里面的扇形，只保留个圆环

mask: radial-gradient(transparent, transparent 47.5px, #000 48px, #000)

animation（animation: name duration timing-function delay iteration-count direction;）

 animation: change 3s infinite cubic-bezier(0.57, 0.29, 0.49, 0.76);

可搭配@keyframes使用

@keyframes

@keyframes change {
                50% {
                    transform: rotate(270deg);
                    --per: 98%;
                }
                100% {
                    transform: rotate(720deg);
                }
            }

@property—过渡有个渐变过程，transition直接过渡，没有缓慢渐变的过程，有时候看起来比较突兀

@property

@property --gradient-start {
  syntax: "<color>";
  initial-value: white;
  inherits: false;
}
div
{
width:100px;
height:100px;
 --gradient-start: white;
  background: linear-gradient(var(--gradient-start), black);
  transition: --gradient-start 1s;
}

div:hover
{
--gradient-start: red;
}

transition

div
{
width:100px;
height:100px;
background: linear-gradient(white, black);
transition:background 2s;
-moz-transition:background 2s; /* Firefox 4 */
-webkit-transition:background 2s; /* Safari and Chrome */
-o-transition:background 2s; /* Opera */
}

div:hover
{
background: linear-gradient(red, black);
}