電光掲示板っぽいの作ってみた。（2022/04/30）

電光掲示板っぽいお知らせ看板をHTMLとCSSで作ってみました！

以下のサイトを参考にさせていただきました。

↓全体的なデザイン

↓カクカクしたアニメーション

CSSスプライトとstepsを使ってアニメーション画像を作ろう

↓ソースコード


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>.contents{
    position: absolute;
    /*top: 50%;
    left: 50%;
    margin-right: -50%;
      transform: translate(-50%, -50%);*/
    width :32em;
    height:10em;
    background-color:#555555;
    padding: 0px;       
}

.logo{
    position:absolute;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1em;
    color:#FFFFFF;
    top:0.5em;
    width: 100%;
    height: 100%;
}


.contents2{
    position:absolute;
    top: 30px;
    left: 1em;
    width: 100%;
    height: 100%;
}

.text {
  position: relative;
  width : 30em;      /* 枠の大きさ */
  border: solid 1px; /* 枠線 */
  background-color: #2f1825;
  padding: 0px;        /* 枠線の内側の余白 */
  overflow : hidden; /* 枠からはみ出た部分を非表示 */
  
}
.text p{
  position: relative;
  z-index: 1;
  font-size: 3em;
  color:#FF6633;
  text-shadow: 0 0 20px;
  padding-left: 100%;    /* 右端から文字をスタートさせるため */
  white-space : nowrap; /* 改行が起こらないように対策 */
  line-height : 0px;         /* 行間（高さ）を1文字分にする */
  animation : scroll 10s steps(60) infinite; /* 下のアニメーションを10秒かけて行い、それをくりかえす */
}

.text a{
    color:inherit;
    text-decoration: none;
}
.dots{
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(
      transparent 0 1px, 
      rgba(0, 0, 0, 1) 1px
    );
    pointer-events: none;
    background-size: 3px 3px;
    content: '';
}
/* アニメーション（右から左に移動） */
@keyframes scroll{
  0% { 
    transform: translateX(0)
  }
  100% {
    transform: translateX(-200%)
  }
}

</style>
</head>

<body>
<div class="contents"><div class="logo">お知らせ</div>
<div class="contents2"><div class="text"><div class="dots"></div>
    <p><a href="https://www.youtube.com/channel/UC8Xk6YI9wC5w2xt2EXQzPww" target="_top">yomiakiのYouTube</a></p>
    <div class="back"></div>
    </div></div>
</div>
</body>
</html>

特に重要なお知らせはなかったので、流れてくる「yomiakiのYouTube」をクリックすると僕のYouTubeチャンネルに飛ぶようにしました。

iframeでページを埋め込む時、その埋め込んだ中のリンクで（iframe内のリンク移動でなく）親のページごと移動させたい時は、<a>タグに