Comment écrire une animation de chargement d'arc et de secteur ?-Tutoriel H5-php.cn

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

PHP中文网

Libérer： 2017-06-21 10:28:01

original

1763 Les gens l'ont consulté

0. Rendus statiques

1. 🎜>

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

Copier après la connexion

* Voici une autre façon

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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.

<!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>

Copier après la connexion

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!