模造網易クラウドロンリープラネットの純粋なCSS3の効果

惑星の影響だけでは任意の難易度を持っていませんが、あなたは惑星の周波数はほとんどトラブルのトラック制御運動に参加したい場合、私はここで、それはほんの少し戻ってとmp3オーディオトラックとアニメーション効果を解決するためのJSを使用する方法を説明する記事を開設しますそれは純粋なCSS3であるので、単に、運動周波数は固定惑星良好に設定されています。

HTMLコード：

<div id="effect-music">
    <div class="image"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
</div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

CSS3のコード

#effect-music {
  position: relative;
  margin: auto;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

#effect-music > .image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575820971101&di=935fabf797c3b30f45f7ed90666f9399&imgtype=0&src=http%3A%2F%2Fimglf1.ph.126.net%2FJceVstVIHMeAlbMvdbYwlA%3D%3D%2F2456713596830921578.jpg);
  background-size: cover;
  background-position: center center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  animation: rotate 10s linear 0s infinite;
  -webkit-animation: rotate 10s linear 0s infinite;
}

#effect-music > .wave {
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 204px;
  height: 204px;
  border-radius: 50%;
  border: 2px solid #eee;
  animation: wave 4s linear 0s infinite;
  -webkit-animation: wave 4s linear 0s infinite;
}

#effect-music > .wave::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  background-color: #ccc;
}

#effect-music > .wave:nth-child(2) {
  animation-delay: 1s;
}

#effect-music > .wave:nth-child(3) {
  animation-delay: 2s;
}

#effect-music > .wave:nth-child(4) {
  animation-delay: 3s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}

@keyframes wave {
  from {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    -webkit-transform: rotate(0deg) scale(1);
    -moz-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    -o-transform: rotate(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotate(-300deg) scale(2.2);
    -webkit-transform: rotate(-300deg) scale(2.2);
    -moz-transform: rotate(-300deg) scale(2.2);
    -ms-transform: rotate(-300deg) scale(2.2);
    -o-transform: rotate(-300deg) scale(2.2);
}
}

知識抽出

どこに4セットの合計は、DIV、惑星の回転効果の周囲を作るために使用され、我々は、渡されたanimation-delay実行時間が均等サイクルの効果には、4つのdivのアニメーションを広げ。
地球の回転:after各セットトップが中立位置をDIV生産擬似要素、これはどのように書き込みに、惑星が開始位置、あなたが考えることができますトラック、そうでない場合はトップの円周上に回転してきたことをCSSを保証するのでしょうか。
ボーダー半径を設定した場合の一部のブラウザでは、境界線はまだボックスとして表示され、このボックスシャドウが国境をシミュレートするために使用することができ、あなたが個人的に試すことができます。

最後にアニメーションを作るために、（理由は著作権の問題で、何の場所のWeb音楽はありません）比較の感覚で見て、音楽をロンリープラネット、このダイナミックな効率のリスニングを言うが、この映画はハードコードされた周波数であり、速い曲はスローな曲はリズムです音楽リンケージに従ってください、私たちはトラックのJS mp3を解決する必要があり、滞在が調整されたので、補うために、物品の後ろになります！

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

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

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

模造網易クラウドロンリープラネットの純粋なCSS3の効果

知識抽出

おすすめ