Comment écrire une animation de chargement d'arc et de secteur ?

0. Rendus statiques

1. 🎜>

width: 3em;
height: 3em;
border: 7px transparent solid;
border-left: 7px #4DB6AC solid;
border-radius: 50%;

　

* Voici une autre façon

border-left:7px #4DB6AC solid;	
border-radius: 50%;
border-top:7px transparent solid;
border-bottom:7px transparent solid;

Après l'effet de l'animation de rotation réalisée par ce dernier n'est pas aussi bonne que la première, et la différence se ressent à l'œil nu

* La largeur et la longueur ne peuvent pas être définies lors du dessin d'un secteur. , le reste revient à dessiner un arc

3.less encapsule le code pour dessiner des arcs et des secteurs

border: 7px transparent solid;
border-left: 7px #4DB6AC solid;
border-radius: 50%;

Afficher le code

4. Code complet pour charger l'animation

.arc(@direction,@style){
@color:~`"@{style}".split(/,\s+/)[1]`;
@width:~`"@{style}".split(/,\s+/)[0].replace("[","")`;
@shape:~`"@{style}".split(/,\s+/)[2].replace("]","")`;
border: @width transparent @shape;
@length:length(@direction);
.setStyle(@length,@style,@direction);
border-radius: 50%;

.setStyle(@length,@style,@direction) when (@length>0){
@index:@length - 1;
@pos:extract(@direction,@length);
border-@{pos}:@style ;
.setStyle(@index,@style,@direction);

}
}
//使用方式:
@driection 可以是top、left、right、bottom中的一个或多个
@style 需要严格按照 7px solid red 这样的顺序
.arc(left,7px solid red);
.arc(left top,7px solid red);

Afficher le code

5. Déclaration

Cas J'ai vu le code sur Internet et je l'ai imité moi-même, mais c'était le cas. pas aussi bon que le premier en termes d'effet et de méthode.

76c82f278ac045591c9159d381de2c579fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30ea80eb7cbb6fff8b0ff70bae37074b813b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89 html,body {  overflow: hidden;  width: 100%;  height: 100%;}.container {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: space-around;  -ms-flex-pack: space-around;  justify-content: space-around;  margin: 0 auto;  max-width: 650px;  min-width: 200px;}.container .canvas {  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  background: #eee;  border-radius: 50%;  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);  height: 10em;  width: 10em;  margin: 1em 1em 2em 1em;}.container .canvas .spinner4 {  width: 3em;  height: 3em;  border: 7px transparent solid;  border-left: 7px #4DB6AC solid;  border-radius: 50%;  -webkit-animation: spinner4 1s linear infinite;  animation: spinner4 1s linear infinite;}@-webkit-keyframes spinner4 {  100% {
            -webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);  }}
        @keyframes spinner4 {  100% {
            -webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);  }}
        .container .canvas .spinner5 {  border: 1.5em transparent solid;  border-right: 1.5em #4DB6AC solid;  border-left: 1.5em #4DB6AC solid;  border-radius: 50%;  -webkit-animation: spinner5 1s linear infinite;  animation: spinner5 1s linear infinite;}@-webkit-keyframes spinner5 {  0% {
            transform: rotate(0deg);  }  50% {transform: rotate(60deg);  }  100% {transform: rotate(360deg);  }}
        @keyframes spinner5 {  0% {
            transform: rotate(0deg);  }  50% {transform: rotate(60deg);  }  100% {transform: rotate(360deg);  }}
        .container .canvas .spinner6 {  width: 1em;  height: 1em;  border-radius: 50%;  background-color: #4db6ac;  margin: 0.1em;  -webkit-animation: fall 1s linear infinite;  animation: fall 1s linear infinite;}
        531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86da3d26fddad773596419d66c0738d6f7726729cccebeafa4ae1b3f5481cc4d8c01b2b5be7d39375e167508b99d8a071d116b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6826729cccebeafa4ae1b3f5481cc4d8c034a400c0b5f06feade14ef21b696287316b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6816b28748ea4df4d9c2150843fecfba6836cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Je suis heureux de connaître le principe, mais les détails nécessitent encore de la pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!