Wie schreibe ich eine Animation zum Laden von Bögen und Sektoren?-H5-Tutorial-php.cn

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

PHP中文网

Freigeben： 2017-06-21 10:28:01

Original

1793 Leute haben es durchsucht

0. Statische Darstellungen

1 🎜>

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

Nach dem Login kopieren

* Hier ist ein anderer Weg

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

Nach dem Login kopieren

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%;

Nach dem Login kopieren

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);

Nach dem Login kopieren

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.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> 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;}
        </style></head><body><div class="container"><div class="canvas"><div class="spinner4"></div></div><div class="canvas"><div class="spinner5"></div></div></div></body></html>

Nach dem Login kopieren

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!