Wie schreibe ich eine Animation zum Laden von Bögen und Sektoren?

0. Statische Darstellungen

1 🎜>

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

　

* Hier ist ein anderer Weg

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

Nach der Wirkung von Die von letzterem erzeugte Rotationsanimation ist nicht so gut wie erstere und der Unterschied ist mit bloßem Auge zu spüren.

* Die Breite und Länge können beim Zeichnen eines Lüfters nicht definiert werden Form, der Rest ist derselbe wie das Zeichnen eines Bogens

3.less kapselt den Code zum Zeichnen von Bögen und Sektoren

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

Code anzeigen

4. Vollständiger Code zum Laden der 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);

Code anzeigen

5. Aussage

Fall: Ich habe den Code aus dem Internet gesehen und ihn selbst nachgeahmt, aber er war hinsichtlich Wirkung und Methode nicht so gut wie ersteres.

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

Ich bin froh, das Prinzip zu kennen, aber die Details müssen noch geübt werden.

Das obige ist der detaillierte Inhalt vonWie schreibe ich eine Animation zum Laden von Bögen und Sektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!