[サンプル付]いろいろなハートをCSSとHTMLで作成してみた！特殊文字コード表もおまけに

今回は、バレンタインも近いということでハートに関することについて！
CSSで作るハートをサンプルコード付きでご紹介したいと思います。
まぁよくあるやつですけど・・・、ぜひ参考にしてみてください。

1. ハート – 通常
- 1.1. HTML
- 1.2. CSS
2. ハート – 動き有り
- 2.1. CSS
3. 特殊文字

ハート – 通常

まずは動きも無く、通常のハート型のサンプルコードになります。
完成イメージは下記になります。

HTML

<div class="heart"></div>

CSS

.heart {
  position: absolute;
  width: 100px;
  height: 90px;
  left: 50%;
  margin-top: -45px;
  margin-left: -50px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: #f88dc8;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin :100% 100%;
}

ハート – 動き有り

続いては、ハートにドクドクと鼓動のような動きを追加したものになります。
完成イメージは下記を！

CSS

先程のCSSに以下のコードを追加すればドクドクと鼓動のようになります。

.heart1{
   animation: pounding .5s linear infinite alternate;
}

@keyframes pounding{
  0%{ transform: scale(1.5); }
  100%{ transform: scale(1); }
}