アニメーションで表現する感動の瞬間！HTML、CSS、SVGで涙滴を描き出す魔法のテクニック
HTML、CSS、SVGを使って涙滴を作る方法
方法1：SVGを使って涙滴の形を作る
- SVG要素で涙滴の形を定義する
<svg width="100" height="100">
<path d="M 50,0 C 75,25 25,75 0,50 C 25,25 75,-25 50,0 Z" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>
このコードは、SVG要素を使って涙滴の形を定義します。path要素を使って涙滴の形状を線で描き、fill属性で透明色、stroke属性で青色、stroke-width属性で線の太さを設定しています。
- CSSを使って涙滴に影と光沢を追加する
svg path {
filter: url(#drop-shadow);
}
#drop-shadow {
filter: feGaussianBlur(stdDeviation=5) feComposite(operator="overlay")
}
このCSSコードは、SVG要素に影と光沢を追加します。filterプロパティを使って、feGaussianBlurとfeCompositeというSVGフィルターを適用しています。これにより、涙滴にぼやけた影と光沢が追加されます。
方法2：CSSアニメーションを使って涙滴を落下させる
- CSSアニメーションで涙滴の動きを定義する
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
svg path {
animation: fall 2s ease-in-out infinite;
}
このCSSコードは、CSSアニメーションを使って涙滴を落下させる動きを定義します。@keyframesを使ってアニメーションの動きを定義し、animationプロパティを使ってSVG要素にアニメーションを適用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>涙滴</title>
<style>
svg path {
filter: url(#drop-shadow);
}
#drop-shadow {
filter: feGaussianBlur(stdDeviation=5) feComposite(operator="overlay")
}
</style>
</head>
<body>
<svg width="100" height="100">
<path d="M 50,0 C 75,25 25,75 0,50 C 25,25 75,-25 50,0 Z" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>涙滴</title>
<style>
@keyframes fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100px);
}
}
svg path {
animation: fall 2s ease-in-out infinite;
}
</style>
</head>
<body>
<svg width="100" height="100">
<path d="M 50,0 C 75,25 25,75 0,50 C 25,25 75,-25 50,0 Z" fill="transparent" stroke="blue" stroke-width="5"/>
</svg>
</body>
</html>
これらのコードをブラウザで開くと、それぞれ涙滴が静止している場合と落下している様子を確認できます。
- 涙滴の落下速度は、
animationプロパティの値を変更することで調整できます。 - 涙滴の影や光沢の強さは、
filterプロパティの値を変更することで調整できます。 - 涙滴の色や大きさは、
stroke属性やd属性の値を変更することで変更できます。
- 異なる形状のSVG要素を複数用意する
<svg width="100" height="100">
<path d="M 50,0 C 75,25 25,75 0,50 C 25,25 75,-25 50,0 Z" fill="transparent" stroke="blue" stroke-width="5"/>
<path d="M 40,25 C 60,50 20,75 0,50 C 20,25 60,-25 40,0 Z" fill="transparent" stroke="blue" stroke-width="3"/>
<path d="M 30,50 C 50,75 10,100 0,75 C 10,50 50,25 30,0 Z" fill="transparent" stroke="blue" stroke-width="2"/>
</svg>
このコードは、異なる形状のSVG要素を複数用意して涙滴を作ります。それぞれ path 要素で異なる形状を定義し、重ねることで奥行きのある涙滴を表現しています。
- CSSを使ってそれぞれの要素の位置と色を調整する
svg path:nth-child(1) {
stroke: #007bff;
}
svg path:nth-child(2) {
stroke: #00b8ff;
}
svg path:nth-child(3) {
stroke: #00e5ff;
}
このCSSコードは、それぞれのSVG要素の位置と色を調整します。nth-childセレクタを使って個々の要素を選択し、strokeプロパティで色を変更しています。
方法4：Canvasを使って涙滴を描く
- Canvas要素を使って描画領域を作成する
<canvas width="100" height="100"></canvas>
このコードは、Canvas要素を使って描画領域を作成します。Canvasは、JavaScriptを使って直接描画を行うことができる要素です。
- JavaScriptを使って涙滴の形を描く
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.quadraticCurveTo(75, 25, 25, 75);
ctx.quadraticCurveTo(0, 50, 25, 25);
ctx.quadraticCurveTo(75, -25, 50, 0);
ctx.closePath();
ctx.fillStyle = 'transparent';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.fill();
ctx.stroke();
このJavaScriptコードは、Canvasを使って涙滴の形を描きます。beginPath、moveTo、quadraticCurveTo、closePathなどのメソッドを使って、涙滴の形状を定義しています。fillStyle、strokeStyle、lineWidthなどのプロパティを使って、色や線の太さを設定しています。
方法5：画像を使って涙滴を表現する
- 涙滴の画像を用意する
- HTMLで画像を挿入する
<img src="tear.png" alt="涙滴" width="100" height="100">
このコードは、HTMLで画像を挿入して涙滴を表現します。img要素を使って、涙滴の画像ファイルのパス、画像の説明、画像の幅と高さを指定しています。
- 方法5は、最も簡単な方法ですが、表現できる涙滴の形状が限られます。
- 方法4は、JavaScriptを使って自由に涙滴を描くことができますが、プログラミングの知識が必要となります。
- 方法3は、複数のSVG要素を重ねることで奥行きのある涙滴を表現できますが、コードが複雑になるというデメリットがあります。
html css svg
