デザイン新しくしました。
2019年4月11日
【Webデザイン】CSSで海外サイトによくある文字の輪郭をなぞるアニメーションを作る
SVGファイルをGIMPなどで作る
今回は無料画像編集ソフトGIMPを使っていきます。
まずは[ファイル]->[新しい画像]でキャンパスを作ります。
キャンパスの大きさはお好みで適当に。
決まったらOKを押してください。
次にツールボックスからテキストを選択して好きな文字を打ち込んでください
フォントは赤丸の部分をクリックすることで選択できます。
次にこのテキストをパスに変換します。
テキストを選択した状態で[レイヤー]->[テキストをパスに]を選択します。
そうするとパスが生成されるので切り抜きツールでキャンパスをトリミングした後
レイヤーのウィンドウ内のパスのタブを開き
生成されたパスを右クリックしてパスをエクスポートします。
ファイルをsvg拡張子で保存しブラウザでファイルを開いてみます。
ソースコードを開いてみるとこのようなタグになっていると思います。
次にsvgタグ内をすべてコピーし、htmlファイルを作っていきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVGを使ってかっこいいアニメーションを作る</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
ここにsvgタグ
</body>
</html>
そしてcssでstroke-dashoffsetをアニメーションさせるだけで例のアニメーションができます。
path {
stroke: #000;
stroke-dasharray: 2000;
stroke-width: 1;
animation: path-anime 3s ease-in forwards;
}
@keyframes path-anime {
0% {
stroke-dashoffset: 2000;
}
100% {
stroke-dashoffset: 0;
}
}
