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

背景

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

実装

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.

最後に

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