アークとセクターのローディングアニメーションを作成するにはどうすればよいですか?

0. 静的レンダリング

1. 円弧を描くためのコード

* 別の方法もあります

後者をローテーション化するアニメーション効果は前者ほどではなく、肉眼で違いを感じることができます。chrome49では

2. 扇形を描画するためのコード

* を定義することはできません。扇形を描くときの幅と長さは、円弧を描くときと同じです

3.lessは、円弧と扇形を描くためのコードをカプセル化します

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

View Code

4。アニメーションの完全なコードをロードします

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

View Code

5 .Statement

ケースのコードはネットで見たものを自分で真似しましたが、それほど良くありません。効果と方法の点では前者です。 原理がわかって良かったですが、詳細はまだ練習が必要です。

以上がアークとセクターのローディングアニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。