はじめに
HTMLとCSSで矢印の周りに弧を描くアニメーションを実装します。
イメージしているものがネット上でヒットせず非常に苦労したため、どなたかのお役に立てれば幸いです。
コピペで使用できます。
実際のコード
※今回、矢印部分は背景透過した下記画像を使用します。
▼HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>アニメーションサンプル</title>
</head>
<body>
<div class="arrow-circle-container">
<!-- 実際の矢印画像を置き換えてください -->
<img src="arrow.png" alt="矢印">
<svg class="circle-animation" viewBox="0 0 40 40">
<!-- r → 円のサイズ -->
<circle cx="20" cy="20" r="18" />
</svg>
</div>
</body>
</html>
▼CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f8f9fa;
}
.arrow-circle-container {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
cursor: pointer;
}
.arrow-circle-container img {
position: relative;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
}
.circle-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: visible;
}
.circle-animation circle {
fill: none;
stroke: black;
stroke-width: 2;
stroke-dasharray: 0 126; /* 初期状態：弧0 */
transform-origin: center;
stroke-linecap: round;
transform: rotate(-140deg) translateX(-10px) translateY(10px);
opacity: 0;
}
/* ホバーで弧を描く */
.arrow-circle-container:hover .circle-animation circle {
opacity: 1;
animation: draw-arc 0.8s ease-in-out forwards;
}
@keyframes draw-arc {
0% { stroke-dasharray: 0 126; }
100% { stroke-dasharray: 90 126; }
}
微調整したい
弧の開始位置や物理的に位置を変えたい場合
cssコード内下記部分を修正してください。
transform: rotate(-140deg) translateX(-10px) translateY(10px);
- -140deg が「弧の開始位置」です。※-180で左中央から開始します
- translateX(-10px)で左に10pxずらしています
- translateY(10px)で上に10pxずらしています
弧の長さを変えたい場合
cssコード内下記部分を修正してください。
0% { stroke-dasharray: 0 126; } →弧 0px、空白 126px → 何も描かれない
100% { stroke-dasharray: 90 126; } → 弧 90px、空白 126px → 弧が90pxだけ描かれる
※描く円のサイズで数値は様々です。
※今回の円の半径は r = 18
※円周 = 2 × 𝜋 × 18 ≈ 113.1
※stroke-dasharray: 90 126 の 126 は少し余裕を持たせている値です。
矢印画像を使用せず実装したい
HTML上の下記１行を書き換えてください。
<!-- 削除 -->
<img src="arrow.png" alt="矢印">
<!-- 追記 -->
<div class="arrow"></div>
次にcss上の下記箇所を書き換えてください。
/* 削除 */
.arrow-circle-container img {
position: relative;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2;
}
/* 追記 */
.arrow {
position: relative;
z-index: 2;
width: 0;
height: 0;
border-left: 20px solid black;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin: 20px auto;
}