純粋なCSS3の音楽演出効果を作ります

音楽シーンのCSS3の効果を作っている今日あなたに持って来られる、単に静的なイメージアニメーション全体が大きな力グリッド効果を得ることができます。実装が少し難しい、と理由CSSの制限のこのアニメ、舞台照明は作業は、全く想像クールに見えません。私はあなたがキャンバス、CSS3ビット無力を利用するために効果を点灯するアニメーションこの種を作ることを示唆しています。

##フロントエンド・コード

<div id="effect-background">
    <div class="bg">
        <img src="http://cdn.zhangyangjun.com/1824bd71-46a2-4d05-9800-6127cb6ad070.jpg"/>
    </div>
    <div class="mask"></div>
</div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

#effect-background {
  position: relative;
  margin: auto;
  margin-top: 40px;
  width: 450px;
  height: 300px;
  overflow: hidden;
}

#effect-background > .bg {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  margin: auto;
  width: 1200px;
  animation: moveX 20s linear 0s infinite alternate;
  -webkit-animation: moveX 20s linear 0s infinite alternate;
}

#effect-background > .bg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  animation: moveY 10s linear 2s infinite alternate;
  -webkit-animation: moveY 10s linear 2s infinite alternate;
}

#effect-background > .mask {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: radial-gradient(
      circle at 200px 120px,
      transparent 18%,
      rgba(0, 0, 0, 0.6) 26%
    )
    no-repeat;
  background-size: 100% 100%;
}

@keyframes moveX {
  from {
    left: 0;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
  }
  to {
    left: 450px;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
}

@keyframes moveY {
  from {
    top: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
  to {
    top: 300px;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
  }
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

知識抽出

モバイルアニメーションチャート使用CSS3アニメーションセット、千鳥可能アニメーションアニメーション移動軌跡より豊かな二組。同時に、あなたはアニメーションの同じ2つのセットはそれの要素には適用されない理由はこれら二つのグループは、達成するために、2つのアニメーション要素を与えられたことがわかりますか？もし頻繁に接触をした場合transform、マトリックスの一つは性質が矛盾であることが多い変わることを知っている必要があり、同時にアニメーションの二つのグループが使用しそうする場合、例外はありませんtransform、あなたがそれらを分離したい場合。
舞台照明は、CSS3での完璧なソリューションでは何も特別であるブラックマスクを、身に着けている光の輝きを聞かせて、生産が困難であることです。私が試したclip-pathし、mask-image最終的に完了するために、円形グラデーションを使用するだけでなく、円形グラデーションハロー効果、一石2羽の鳥を達成するために、効果がなかったです。
グラデーションで背景に現代的なクロムと他のブラウザでは（効果は、位置を変更する非常に鈍い力である）一つだけの場所で遊ぶことができるアニメーション全体のライトを導き（効果なしで）適用されたアニメーション属性、することはできません。

全体的に、効果は、キャンバスやSVGアニメーションが光の問題を解決するために移動しようとすることができる次の時間を達成したが、完璧ではありません。

プログラミングの世界 - クラウド

公開された247元の記事・ウォンの賞賛9 ・ビュー7981

プライベートの手紙の懸念

純粋なCSS3の音楽演出効果を作ります

知識抽出

おすすめ