メモを揉めスマートフォン用の表示で見るメモを揉めお勉強の覚書。この広告は、90日以上更新していないブログに表示しています。プログラミングGWはこれを作ってました。時計と世界各地のライブカメラの映像を組み合わせたものです。APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。以下の操作が行えます。時刻を表す文字のシルエットをShift+Kで太くShift+Jで細くするShift+Cで周囲の色、Shift+Lで時刻の文字色を変更する操作するには、一度この時計をクリックしたりしてフォーカスしてあげてください。仕組みLiveカメラの映像を一番下に置き、その上に重ねた<div></div>要素をCSSでアニメーションさせて、数字のシルエットを作っています。以前、オリンピックのエンブレムを動かした時のコードを流用して、少しづついじっていたものがベースになっています。オリンピックのエンブレムに特化していたコードを、もう少し汎用的に使えるようにして、3x3のパターン化された図形を扱いやすくするok-blocksというライブラリにしました。memowomome.hatenablog.comwww.npmjs.comok-blocksのデモページ今回はこのok-blocksを使用して、前々から作ってみたいと思っていたアイデアを試してみたものです。倍率によっては<div></div>要素同士の隙間が線になってしまうことがあるのが残念ですが、概ねイメージどおり形にできたので良かったです。時刻のフォーマットには前から気になっていたMoment.jsを使用してみました。Moment.jsあと、数字の大きさがフィボナッチ数列になっています。animationが使えるようになり、擬似セレクタの種...2016-07-28Stylusのあまり知られていない機能というより、自分が最近知った機能。ハッシュをCSSのプロパテ...2015-08-13話題の五輪エンブレムをCSSで動かしてみた今日もよく燃えてますね。)はてなブログをはじめよう!alluserさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。