アニメーションアイコンを使ってみる
2024.12.03 09:00
2024.12.03 12:04
SVGのアイコンを動かせるようなので試してみました。
まずはデモを。
やり方は至って簡単で、
ここのサイトからコードをコピーして貼り付けるだけです！
コード的にはこんな感じですね。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
</style>
<title></title>
</head>
<body id="top">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes check {
to {
stroke-dashoffset: 0;
}
}</style><circle cx="12" cy="12" r="8" stroke="#0A0A30" stroke-width="1.5"/><path stroke="#265BFF" stroke-linecap="round" stroke-width="1.5" d="M9.215 12.052l1.822 1.805 3.748-3.714" style="animation:check 2s infinite cubic-bezier(.99,-.1,.01,1.02)" stroke-dashoffset="100" stroke-dasharray="100"/></svg>
</body>
</html>色を変える場合は、SVGコード内のstrokeのカラーコードを変更するだけです。
コードはこんな感じで。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
</style>
<title></title>
</head>
<body id="top">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes check {
to {
stroke-dashoffset: 0;
}
}</style><circle cx="12" cy="12" r="8" stroke="#CC0000" stroke-width="1.5"/><path stroke="#CC0000" stroke-linecap="round" stroke-width="1.5" d="M9.215 12.052l1.822 1.805 3.748-3.714" style="animation:check 2s infinite cubic-bezier(.99,-.1,.01,1.02)" stroke-dashoffset="100" stroke-dasharray="100"/></svg>
</body>
</html>チェックマークと枠の色が赤になりました。
これも簡単ですね！
今回は以上です！