こんにちは、Habrauser！
さらに悪いことに、このストップウォッチのコードは1100行ほどかかることも、半分のブラウザーでしか機能しないこともわかりません。
しかし、これがどのように機能するかに興味があるなら、猫をお願いします。
エントリー
まずブラウザについて。 このコードは、FireFox、Safari、Chromeの現在のものから機能します。 IE10や超秘密の新しいOperaなどの
第二に、CSS3で描画するのではなく、アニメーションのプロセスを説明することにすぐに注意します。 将来の計画では、CSSで非常に美しい絵を描くのとは正反対です。 はい、サファリの開発者が古い線形勾配標準（さよなら色の停止、開始、終了、0 0）を放棄した後、それほど退屈にならず、Operaは放射状勾配（後者）をサポートし始めました比較的昔に起こった）。
最初は、矢印だけを使って誰もが馴染みのあるストップウォッチにすることを考えましたが、それは非常に退屈です。
モニターの周りに2本の矢印が走っているのを見ると、そのドライブはなく、メカニズムの感覚もありません。 一方、マウスが移動した経路の走行距離計のようなことをかつて行ったことをすぐに思い出しました。 そして、それは私に夜明けをもたらしました。
レース
最初に、HTMLを作成します（以下は、「走行距離計」の例です）。
<div class="timer"> <div class="numb tenHour"> </div> <div class="numb hour"> </div> <div class="numb tenMin"> </div> <div class="numb min"> </div> <div class="numb tenSec"> </div> <div class="numb sec"> </div> <div> :</div> <div class="numb tenMilisec"> </div> <div class="numb milisec"> </div> </div>
計画は次のとおりです。各麻痺した歌姫に対して、エントリ「0 1 2 3 4 5 6 7 8 9 0」を持つ擬似要素を割り当てます。
なぜ2つのゼロですか？ アニメーションは一方の端からもう一方の端に移動し、時間の遅延なしに元の位置に戻ります。 実際、2つの異なるゼロが表示されますが、実際の例ではこれは目立ちません。
なぜ擬似要素なのですか？ divに直接数字を書いてみませんか？ 2つの利点があります。1つはHTMLの外観を損なわないこと、もう1つはHTMLを1回だけ記述することです。
CSSがないものを取得します
.timer div { float: left; width: 30px; height: 30px; position: relative; } .numb::before { content:"0 1 2 3 4 5 6 7 8 9 0"; position: absolute; width: 30px; /* 30px, , . */ height: 360px; color: #334; text-align: center; } .timer div::after { content: ""; height: 360px; width: 1px; left: 0; background: #889; } .timer div:first-child::after { display: none; }
私たちはオーバーフローをかけました：親に隠されて出来上がり！ すべて、走行距離計の準備ができました。
アニメーション
アニメーションを始めましょう、すべてが簡単です：
.numb { animation-delay: 0; /* */ animation-iteration-count: infinite; /* - */ animation-timing-function: linear; /* - */ } .tenHour {animation-duration: 1000000s;} /* */ .hour { animation-duration: 100000s;} .tenMin { animation-duration: 10000s;} .min { animation-duration: 1000s;} .tenSec { animation-duration: 100s;} .sec { animation-duration: 10s;} .tenMilisec { animation-duration: 1s;} .milisec { animation-duration: .1s;} /* , ms, */
今最も退屈な、フレーム、またはむしろキーフレーム、それらは「フレーム」でもあります。
@-keyframes timer { 0% {top:0} 100% {top:-300px;} }
そのようなコードは私たちには合わず、すべてがスムーズに動きますが、いため間違っています。 一時停止すると、私たち自身が理解できない値に到達することができます。 このように書きます：
@-keyframes timer { 0% {top:0} 9% {top:0} 10% {top:-30px} 19% {top:-30px} 20% {top:-60px} 29% {top:-60px} 30% {top:-90px} 39% {top:-90px} 40% {top:-120px} 49% {top:-120px} 50% {top:-150px} 59% {top:-150px} 60% {top:-180px} 69% {top:-180px} 70% {top:-210px} 79% {top:-210px} 80% {top:-240px} 89% {top:-240px} 90% {top:-270px} 99% {top:-270px} 100% {top:-300px;} }
私はすべてをペイントしません、それは意味がありません。 一番下の行は、カウンターをひっくり返すために割り当てられた時間として、10秒の1％を要するということです。
したがって、10分の1-0％9.9％10％19.9％など。 さらに、100分の1-0％9.99％、1000分の1-0％9.999％。
稼いだ！
今一番美味しいのは、JSなしでこのすべてを動かす方法ですか？ onclickをどのようにシミュレートしますか？
要件を満たすいくつかのトリックがあります。
最初に、最も古く、最も簡単な-参照用の擬似クラス
つまり、アクティブ、フォーカスです。 しかし、これは退屈であり、さらに、Chromeバギーで機能します（IEでは多分IEで！？いいえ、Chromeで）
2番目に楽しい方法は、
<input />
ラジオとチェックボックスを使用することです。
そして彼の疑似要素：cheked。 各
<input />
追加のラベル要素が必要になるため、このメソッドを削除しました。
私が思いついた3番目の方法は同じリンクですが、ターゲットを使用しています。
これらはすべてあなたが頼ることができる方法ではありませんが、私が決着したとき：私はもっと考えたくありませんでした。
HTMLコード：
<a class="start" id="start" href="#start"></a> <a class="pause" id="pause" href="#pause"></a> <a class="stop" id="stop" href="#stop"></a>
何も説明する必要さえありません。
そして今、CSS：
.start:target ~ .timerInner .numb, .pause:target ~ .timerInner .numb { animation-name: timer; } .start:target ~ .timerInner .numb.tenSec, .pause:target ~ .timerInner .numb.tenSec { animation-name: timertenSec; } .pause:target ~ .timerInner .sec, .pause:target ~ .timerInner .tenMilisec { animation-play-state: paused; } .stop:target ~ .timer .tenSec, .stop:target ~ .timer .sec, { animation-name: reset; }
アニメーション名として、上記のキーフレーム名を付けました。
そして、すべてが機能し始めます。 一時停止ボタンについても設定します。これは、クリックしたときにアニメーションが無効にならないようにするためです。ただし、このアニメーション再生状態では、アニメーションを停止する必要があります。
[停止]をクリックすると、理論的には任意の名前を割り当てることができます。主なことは、アニメーションの名前と一致しないため、ゼロ化が発生することです。 すべてのアニメーションコードからはほど遠いものを提示しましたが、実際は単調であり、コードを見ることに興味がある各divに個別に割り当てられています。
では、時計を作りましょう。 私たちが興味を持たないのは矢印、ダイヤルです。
HTML
<div class="clock"> <div class="line one"></div> <div class="line three"></div> <div class="line five"></div> <div class="arrow"></div> </div>
ディーバ線は、分数を分単位で区切る垂直線を単に示しています。
矢印は私たちの矢印です。
CSS
.arrow { animation-delay: 0; /* */ animation-iteration-count: infinite; /* */ animation-timing-function: linear; /* */ animation-duration: 600s; /* 10 x 60 = 600, */ background:#666; }
走行距離計で矢印を同様に開始します。
コードは不要だと思います。
一般的に、 最終結果は再びです。
ご清聴ありがとうございました。実際、私は新しいことは何も言わず、個人的にはこの情報を長い間所有しています。
誰かが役に立つか、単に面白いかもしれません。