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

縦横クロスタイポグラフィ

縦書きと横書きのテキストが十字に交差して配置され、交点がゆっくり明滅します。ブランドサイトのアバウトページなど世界観の演出に。

css

プレビュー

ソースコード

HTML

<div class="d02-12-06-stage">
          <p class="d02-12-06-v">物語は、続く</p>
          <p class="d02-12-06-h">since 2010</p>
          <span class="d02-12-06-dot"></span>
        </div>

CSS

.prev.d02-12-06{ background:#fff; }
        .d02-12-06 .d02-12-06-stage{
          position:relative;
          width:220px;
          height:200px;
        }
        .d02-12-06 .d02-12-06-v{
          position:absolute;
          top:8px; left:50%;
          transform:translateX(-50%);
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:18px;
          font-weight:700;
          letter-spacing:.24em;
          color:#1a2333;
          margin:0;
        }
        .d02-12-06 .d02-12-06-h{
          position:absolute;
          top:50%; left:0;
          transform:translateY(-50%);
          width:100%;
          text-align:center;
          font-size:14px;
          font-weight:700;
          letter-spacing:.16em;
          color:#7c3aed;
          margin:0;
        }
        .d02-12-06 .d02-12-06-dot{
          position:absolute;
          top:50%; left:50%;
          width:10px; height:10px;
          margin:-5px 0 0 -5px;
          border-radius:50%;
          background:#7c3aed;
          box-shadow:0 0 0 0 rgba(124,58,237,.5);
          animation:d02-12-06-pulse 2.4s ease-in-out infinite;
        }
        @keyframes d02-12-06-pulse{
          0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(124,58,237,.45); }
          50%{ transform:scale(1.5); box-shadow:0 0 0 10px rgba(124,58,237,0); }
        }

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