パーツ番号 07-06-02 ・ CSSのみ

アルバムアート回転レコード演出

再生中はジャケット画像に見立てたグラデ円がゆっくり回転し続けるレコードプレーヤー風演出です。

css3d

プレビュー

ソースコード

HTML

<div class="player07-06-02">
          <div class="disc07-06-02">
            <div class="hole07-06-02"></div>
          </div>
          <div class="arm07-06-02"></div>
        </div>

CSS

.d07-06-02{ background:#1c1410; }
        .d07-06-02 .player07-06-02{ position:relative; width:150px; height:150px; }
        .d07-06-02 .disc07-06-02{ width:150px; height:150px; border-radius:50%; background:
          repeating-radial-gradient(circle,#2a2a2a 0 2px,#1a1a1a 2px 4px),
          conic-gradient(from 0deg,#f97316,#f43f5e,#a855f7,#f97316);
          animation:spin07-06-02 4s linear infinite; box-shadow:0 6px 18px rgba(0,0,0,.5); }
        .d07-06-02 .hole07-06-02{ position:absolute; top:50%; left:50%; width:18px; height:18px; border-radius:50%; background:#111; transform:translate(-50%,-50%); border:3px solid #ddd; }
        .d07-06-02 .arm07-06-02{ position:absolute; top:-10px; right:-20px; width:6px; height:80px; background:#ccc; border-radius:3px; transform:rotate(25deg); transform-origin:top center; }
        @keyframes spin07-06-02{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

クラス名 .d07-06-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。