2 つのシンプルな読み込みアイコン_html/css_WEB-ITnose-htmlチュートリアル-php.cn

2 つのシンプルな読み込みアイコン_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:16

オリジナル

1157 人が閲覧しました

固定された記事: 「シルバーの MacBook Air を作成するための純粋な CSS (フルバージョン)」前の記事: 「JavaScript は「値渡し」ではない」

著者のホームページ: myvin
Blogger QQ: 851399101 (一時セッションを開始するには QQ をクリックしてください)ブロガーと)

前に書きました

最近色々なことがあったので、時間をかけて簡単な CSS 読み込みアニメーションを 2 つ書いて投稿しました。これらの 2 つのアニメーションは比較的一般的なものです。外側のリングは灰色のトラックに沿って中心の周りを回転し、もう 1 つは少しやりすぎた小さな黒い尾が中心の周りを回転します。

エフェクトは次のとおりです:

リアルタイムエフェクトと完全なコードは、ここをクリックして Codepen で表示できます。

主にアニメーション、グラデーション、ビフォーアフターを使用します。比較的単純なため、プロセスは詳しく説明しません。

ここには主要なコードスニペットのみがリストされています。

時間があればもっと書いて投稿します。

Markup:

<div class="wrap">  <div class="loading1"></div></div><div class="wrap">  <div class="loading2"></div></div>

ログイン後にコピー

CSS:

.wrap,.loading1,.loading2{margin:0 auto;padding:0 auto;}.wrap{width:200px;height:200px;border:1px solid rgba(0,0,0,1);}.loading1{width:100px;height:100px;position: relative;top:30px;border-top:20px solid rgba(000,000,000,1);border-right:20px solid rgba(000,000,000,0.2);border-bottom:20px solid rgba(000,000,000,0.2);border-left:20px solid rgba(000,000,000,0.2);border-radius: 50% 50%; -moz-animation:circle 1.5s infinite linear;-o-animation:circle 1.5s infinite linear;-webkit-animation:circle 1.5s infinite linear;animation:circle 1.5s infinite linear;}.loading2{position: relative;top:30px;width:140px;height:140px;border-radius: 50%; background:-webkit-linear-gradient(left,black 25%,rgba(0,0,0,0) 50%);-moz-animation:circle 1.5s infinite linear;-o-animation:circle 1.5s infinite linear;-webkit-animation:circle 1.5s infinite linear;animation:circle 1.5s infinite linear;}.loading2:before{content: '';width:50%;height:50%;position: absolute;left:0;top:0;background-color: black;border-radius: 100% 0 0 0;}.loading2:after{content: '';width:100px;height:100px;border-radius: 50%;background-color: white;position: absolute;left: 20px;top:20px;}@-moz-keyframes circle{0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}100% {-moz-transform:rotate(360deg);transform:rotate(360deg);}}  @-moz-keyframes circle{0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}100% {-moz-transform:rotate(360deg);transform:rotate(360deg);}}@-o-keyframes circle{0% {-o-transform:rotate(0deg);transform:rotate(0deg);}100% {-o-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframes circle{0% {-moz-transform:rotate(0deg);transform:rotate(0deg);}100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes circle{0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}

ログイン後にコピー

「オブジェクトによる呼び出し」または「***********」とも呼ばれます
転載する場合は、作成者と出典を忘れずに明記してください -.-
著者: myvin
出典:

前の記事: 「JavaScript は「値渡し」ではない」トップ記事: 「シルバーの MacBook Air を作成するための Pure CSS (完全版)」