タグ

background-positionとhtml5に関するedo_m18のブックマーク (1)

  • CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA

    ICS MEDIAのトップページに掲載しているモーショングラフィック。これはCSSHTML Canvas要素を使って作成したものです。時間経過とともに波の形状と色彩が変化し、多彩な表現を楽しめるようになっています。 記事ではCSSHTML Canvasの理解につながることを目標に、このモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル ステップ1. CSSでグラデーション背景の作成 サンプルを別ウインドウで開く ソースコードを確認する はじめに、時間経過で色彩が変化するグラフィックを作成しましょう。CSSで縦に長いグラデーションの背景を用意し、CSSアニメーションを使って縦方向に移動させることでグラデーションが変化する表現ができます(ステップ1のソースコード)。 #b

    CSSとHTML Canvasで作るモーショングラフィック - ICS MEDIA
    edo_m18
    edo_m18 2015/11/26
    相変わらず分かりやすい記事。多少JS使っているとは言え、CSSでここまでできるようになったんだなぁ。
  • 1