[CSS]下にスクロールしろという案内をふわふわアニメートするCSS トップページに全画面イメージを表示させると、ユーザが「これですべてのコンテンツなんだ!」と勘違いされてしまうことがあるようです。 そんな時には、このCSSが多少役に立つかと。 HTML <p class="scroll-announce">下にスクロールしてね</p> CSS body { background: #000; color: #fff; min-height: 1000px; } .scroll-announce { text-align: center; position: relative; } .scroll-announce:after { font-size: 40px; font-weight: bold; display: block; text-align: center; content: "↓"; position: absolute; left: 50%; left: calc( 50% - 24px ); bottom: -100px; width: 48px; animation: scroll-announce 3s ease infinite; } @keyframes scroll-announce { 0% { transform:translateY(0) } 70% { transform:translateY(-15px) } 100% { transform:translateY(0) } } Run Result コメントを残す コメントをキャンセルメールアドレスが公開されることはありません。 * が付いている欄は必須項目ですコメント 名前 * メール * サイト このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。