いつも読んで頂きありがとうございます。
以前CSSシェイプの記事を書きましたがハートのCSSシェイプで文章の横でドキドキ出来
ないか考えていましたが何となく出来たので紹介。
ドキッとした時に使えるかも
ハートだけのCSSシェイプは以前の記事で書きましたが文章の最後に付けるとこんな感
じになります。
心臓がドキドキです！
コード
<style><!--
.heart {
position:absolute;
margin-top:2px;
width:30px;
height:30px;
background:red ;
clip-path: polygon(3% 23%, 3.1% 20%, 4% 15%, 6% 10.8%, 8% 7.9%, 10% 5.9%, 14% 3%, 18% 1%, 22% 0.2%, 25% 0%, 28% 0.2%, 30% 0.7%, 34% 2%, 38% 4%, 42% 7%, 46% 12%, 50% 19%, 54% 12%, 58% 7%, 62% 4%, 66% 2%, 70% 0.7%, 72% 0.2%, 75% 0%, 78% 0.2%,82% 1%,86% 3%, 90% 5.9%, 92% 7.9%, 94% 10.8%, 96% 15%, 96.9% 20%, 97% 23%, 96% 31%, 92% 40.2%, 88% 46.9%,84% 52%, 80% 56.2%, 76% 60.2%,72% 64%, 68% 67.2%, 62% 72%, 56% 76.1%, 50% 80%, 44% 76.1%, 38% 72%, 32% 67.2%, 28% 64%, 24% 60.2%,20% 56.2%, 16% 52%, 12% 46.9%,8% 40.2%,4% 31%);
animation: 0.3s dokidoki infinite alternate ease-in-out;
}
@keyframes dokidoki {
from {
clip-path: polygon(3% 23%, 3.1% 20%, 4% 15%, 6% 10.8%, 8% 7.9%, 10% 5.9%, 14% 3%, 18% 1%, 22% 0.2%, 25% 0%, 28% 0.2%, 30% 0.7%, 34% 2%, 38% 4%, 42% 7%, 46% 12%, 50% 19%, 54% 12%, 58% 7%, 62% 4%, 66% 2%, 70% 0.7%, 72% 0.2%, 75% 0%, 78% 0.2%,82% 1%,86% 3%, 90% 5.9%, 92% 7.9%, 94% 10.8%, 96% 15%, 96.9% 20%, 97% 23%, 96% 31%, 92% 40.2%, 88% 46.9%,84% 52%, 80% 56.2%, 76% 60.2%,72% 64%, 68% 67.2%, 62% 72%, 56% 76.1%, 50% 80%, 44% 76.1%, 38% 72%, 32% 67.2%, 28% 64%, 24% 60.2%,20% 56.2%, 16% 52%, 12% 46.9%,8% 40.2%,4% 31%);
}
to {
clip-path: polygon(7.9% 24%, 8.1% 20%, 10% 15%, 12% 11.9%, 14% 9.8%, 16% 7.9%, 18% 6.8%, 20% 5.8%, 22% 5%, 24% 4.4%, 26% 4.1%, 30% 4.3%, 32% 4.8%, 36% 6%, 40% 8%, 45% 13%, 50% 21%, 55% 13%, 60% 8%, 64% 6%, 70% 4.8%, 72% 4.3%, 74% 4.1%, 76% 4.4%, 78% 5%,80% 5.8%,82% 6.8%, 84% 7.9%, 86% 9.8%, 88% 11.9%, 90% 15%, 91.9% 20%, 92.1% 24%, 91.8% 30%, 90% 36%, 88% 40%,84% 46%, 80% 51.5%, 76% 56%,72% 59.8%, 68% 63%, 62% 68%, 56% 72%, 50% 76%, 46% 73.6%, 42% 70.8%, 38% 67.9%, 32% 63%, 28% 59.5%,24% 56%, 20% 51.5%, 16% 46%,12% 40%,8.1% 30%
);
background: orange ;
}
}
--></style>
<p><span style="font-size: 100%;"><strong>心臓がドキドキです！</strong></span> <span class="heart"> </span></p>
.heart {
position:absolute;
margin-top:2px;
width:30px;
height:30px;
background:red ;
clip-path: polygon(3% 23%, 3.1% 20%, 4% 15%, 6% 10.8%, 8% 7.9%, 10% 5.9%, 14% 3%, 18% 1%, 22% 0.2%, 25% 0%, 28% 0.2%, 30% 0.7%, 34% 2%, 38% 4%, 42% 7%, 46% 12%, 50% 19%, 54% 12%, 58% 7%, 62% 4%, 66% 2%, 70% 0.7%, 72% 0.2%, 75% 0%, 78% 0.2%,82% 1%,86% 3%, 90% 5.9%, 92% 7.9%, 94% 10.8%, 96% 15%, 96.9% 20%, 97% 23%, 96% 31%, 92% 40.2%, 88% 46.9%,84% 52%, 80% 56.2%, 76% 60.2%,72% 64%, 68% 67.2%, 62% 72%, 56% 76.1%, 50% 80%, 44% 76.1%, 38% 72%, 32% 67.2%, 28% 64%, 24% 60.2%,20% 56.2%, 16% 52%, 12% 46.9%,8% 40.2%,4% 31%);
animation: 0.3s dokidoki infinite alternate ease-in-out;
}
@keyframes dokidoki {
from {
clip-path: polygon(3% 23%, 3.1% 20%, 4% 15%, 6% 10.8%, 8% 7.9%, 10% 5.9%, 14% 3%, 18% 1%, 22% 0.2%, 25% 0%, 28% 0.2%, 30% 0.7%, 34% 2%, 38% 4%, 42% 7%, 46% 12%, 50% 19%, 54% 12%, 58% 7%, 62% 4%, 66% 2%, 70% 0.7%, 72% 0.2%, 75% 0%, 78% 0.2%,82% 1%,86% 3%, 90% 5.9%, 92% 7.9%, 94% 10.8%, 96% 15%, 96.9% 20%, 97% 23%, 96% 31%, 92% 40.2%, 88% 46.9%,84% 52%, 80% 56.2%, 76% 60.2%,72% 64%, 68% 67.2%, 62% 72%, 56% 76.1%, 50% 80%, 44% 76.1%, 38% 72%, 32% 67.2%, 28% 64%, 24% 60.2%,20% 56.2%, 16% 52%, 12% 46.9%,8% 40.2%,4% 31%);
}
to {
clip-path: polygon(7.9% 24%, 8.1% 20%, 10% 15%, 12% 11.9%, 14% 9.8%, 16% 7.9%, 18% 6.8%, 20% 5.8%, 22% 5%, 24% 4.4%, 26% 4.1%, 30% 4.3%, 32% 4.8%, 36% 6%, 40% 8%, 45% 13%, 50% 21%, 55% 13%, 60% 8%, 64% 6%, 70% 4.8%, 72% 4.3%, 74% 4.1%, 76% 4.4%, 78% 5%,80% 5.8%,82% 6.8%, 84% 7.9%, 86% 9.8%, 88% 11.9%, 90% 15%, 91.9% 20%, 92.1% 24%, 91.8% 30%, 90% 36%, 88% 40%,84% 46%, 80% 51.5%, 76% 56%,72% 59.8%, 68% 63%, 62% 68%, 56% 72%, 50% 76%, 46% 73.6%, 42% 70.8%, 38% 67.9%, 32% 63%, 28% 59.5%,24% 56%, 20% 51.5%, 16% 46%,12% 40%,8.1% 30%
);
background: orange ;
}
}
--></style>
<p><span style="font-size: 100%;"><strong>心臓がドキドキです！</strong></span> <span class="heart"> </span></p>
最初は<span class="heart"></span>でしたがコピペすると勝手に削除されるみ
たいなので を入れています。
コード説明
width:30px;
height:30px;
ハートの大きさになります。pxを大きくすると大きくなりますが位置がずれますので次
のmargin-topで調整でします。
margin-top:0px;
ハートだけの位置調整ができます。上にずらしたいときは－○○pxになります。
background:red ; background:orange ;
ハートの色で赤色と橙色が交互になります。同色でも違う色でも指定できます。
<span style="font-size: 100%;">
文字サイズで%で指定。
animation: 0.3s dokidoki infinite alternate ease-in-out;
アニメーションの秒数で遅くしたい場合は大きくしてください。
最後に
ハートの位置は編集とプレビューで若干ズレるので確認しながら作ってください。
他にも作れそうですが座標設定が面倒なんですよね。
リクエストがあれば考えます。
