HTML5とCSS3でズンドコキヨシもどき

  • 21
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

ズンドコブームにのって、HTML5とCSS3で挑戦しました。
入力欄に「ズンズンズンズンドコ」というフレーズが入力されると「キ・ヨ・シ!」します。

3943d2c3-fa46-42e1-aac3-147348ada45a.gif
CODE PENで見る

実装

  • input要素のpattern属性を利用する
  • :valid疑似クラスを利用する
  • ::after疑似要素はinput要素には使えないため、「キ・ヨ・シ!」用に後ろにspan要素を配置する
  • 「ズンズンズンズンドコ」と入力されたら入力欄より一回り大きいspanを上にかぶせて、以降の入力を不可とする(美しくないしフォーカスがそのままだと入力できてしまう…:astonished:

HTML

<p>
    <input type="text" pattern=".*ズンズンズンズンドコ$" required="required">
    <span></span>
</p>

CSS

p{
  position:relative;
}
input {
  width: 400px;
  height:20px;
}
input:valid + span {
  display:block;
  position:absolute;
  top:0;
  width: 420px;
  height:30px;
  z-index:9999;
}
input:valid + span::after {
  content: "キ・ヨ・シ!";
  position:absolute;
  top:30px;

  color:red;
  font-size:300%;
  font-weight:bold;

  /* おまけのアニメーション */
  -webkit-animation: blink 0.3s linear 0s 3;
  -moz-animation: blink 0.3s linear 0s 3;
  animation: blink 0.3s linear 0s 3;
}
@-webkit-keyframes blink {
  0%    { opacity: 0;}
  49.9% { opacity: 0;}
  50%   { opacity: 1;}
  100%  { opacity: 1;}
}
@-moz-keyframes blink {
  0%    { opacity: 0;}
  49.9% { opacity: 0;}
  50%   { opacity: 1;}
  100%  { opacity: 1;}
}
@keyframes blink {
  0%    { opacity: 0;}
  49.9% { opacity: 0;}
  50%   { opacity: 1;}
  100%  { opacity: 1;}
}