HTML
CSS
HTML5
CSS3
HTML,CSS

某RPGっぽいUIをCSSとHTMLだけでつくってみたよ

背景

CSSだけで色々出来ることが分かってきたので、少し作ってみたよ。
*PC版Chromeでしか確認してないよ!

名称未設定.mov.gif

実装

CheckBoxで状態変化

CheckBoxがチェックされたときだけ状態を変化させる感じ。
下記のような実装で対象となる要素の状態を変えられる

<input id="s1" type="radio" name="sel">
<label class="sel" for="s1" id="sl1">こうげき</label>
.nesttarget{
/* ~~省略~~ */
  display:none;/* 通常時は表示を消しておく */
}
#s1:checked ~ .nesttarget{
  display:block;/* CheckBoxがcheckedに変化した場合に表示 */
}

点滅する矢印

before要素で頭に記号を付けて実装
これをアニメーションで点滅させる

/* "▶"→" "を繰り返すようなアニメーション効果 */
@keyframes select-anime {
    0% {content: "▶";}
    100% {content: " ";}
}
#s1:checked ~ #sl1:before {
  animation: select-anime 500ms linear infinite;
}

デモ

See the Pen Create a RPG-like UI with CSS and HTML only by hashito (@hashito) on CodePen.

最後に

すごく雑な記事ですが…
自分の備忘録としてのこさせてください…