win10日历交互效果

win10日历

ロングは、次のwin10日历的动态CSSの効果を達成するために試してみたかった、そして今、最終的にそれをしようとする時間を持っています。
この記事では、単純な効果である、高度な記事は、フォローアップ感心しません

ターゲット効果

1. ターゲット要素にマウス、関連8つの点灯周り要素は、円形のハイライト範囲を点灯します
2. 要素を選択するためにクリックして、青色

レンダリングを実現

1.win10絵は、図2の主は、実装図3高度な実装しました

技術のポイント

1. パブリッククラス定義：

   • ---無効にグレー表示
   • ホバー（N）--- 9つのブロックが強調され
   • アクティブ---アクティブにするためにクリックしてください

2. 円形、ハイライト領域に9つのブロックを達成

   • CSS：使用backgroundプロパティ、放射状の勾配値
   • CSS：放射状グラデーションのパラメータの順序：放射状、勾配、勾配の方向
   • JS：アクティブ、モバイルバインディングホバークラス名をバインドするために、クラス名をクリックします（9）
   • JS：クラス名をバインドする時、最初の空の再バインドを削除
   • JS：マウスを上下に遭遇拒絶プロセス、削除クラス名に対して逆方向

コード

それを見るにはこちらをクリックして関連するコード
の主はgithubのコードの表示を実現

---

他の

これは、次のランク片がマウスの移動の強調表示領域も移動したときに表示される、ちょうど最初の実装である
効果を達成するために、この記事のハイライト範囲の周りに、それは小さな丸い9、パートIIによってスプライスアウトされます記事私が実現し、別のアイデアを紹介します。