江端さんの技術メモ(2020-01-16)

2020-01-16 Web画面の中央で「移動中」が点滅するhtml [長年日記]

Web画面の中央で「移動中」が点滅するhtmlを作って欲しいといったら、私の上司が作ってくれました。

以下を"blue.html"という名前で保存

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="blue-style.css">
    <meta charset="utf-8">
  </head>
  <body>
    <div class="central">
      <div class="subtitle">
        移動中
      </div>
    </div>
  </body>
</html>

以下を"blue-style.css"という名前で保存

body {
  background: blue;
  color: white;
  overflow: hidden;
}
 
.central {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  font-size: 220px;
  font-weight: bold;
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}
 
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;
}

[ツッコミを入れる]