JavaScriptを使用せず、CSSだけで矢印が繰返し動くアニメーション作る方法をご紹介します。
テキストのアテンションに使えます。
ディスプレイ広告
矢印と動きをCSSで記述
※CSSの「animation」と「keyframes」を使って矢印を動かしてます。必要に応じて書き換えてください。
<style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; font-size: 16px; } h1{ font-size:18px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0; } .arrow { position: relative; width: 100px; margin: 0 auto; } .arrow::before { animation: arrow 2.5s infinite; border: solid #FF0000; border-width: 0 0 2px 2px; content: ""; margin: auto; position: absolute; top: -64px; left: 25px; transform: rotate(-45deg); width: 20px; height: 20px; } .att{ font-size:16px; font-weight:bold; color: #FF0000; } @keyframes arrow { 0% { transform: rotate(-45deg) translate(0, 0); } 60% { transform: rotate(-45deg) translate(-30px, 30px); } 0%, 60%, 100% { opacity: 0; } 30% { opacity: 1; } } </style>
矢印のHTML記述
<div class="arrow"> <span class="att">ココに注目</span> </div>
矢印が繰返し動くCSSアニメーションデモページ
※流用される場合は自己責任でお願いします。