/* ////////////////////////////////////////////////////////////////////////////////////////////////////
◆◆◆◆◆text-AddAction1◆◆◆◆◆
＜参考資料＞使わせていただきます
—————————————————————-
【CSSのみ】ホバーするとハートがふわっと浮かび上がるボタンを実装する方法
https://web-dev.tech/front-end/css/show-heart-button-css/
By WebDev Tech
/* ///////////////////////////////////////////////////////////////////////////////////////////////// */
/* ボタン本体のスタイル */
.text-Ad.dAct.ion1 {
/* ボタン要素の大きさや色 */
display: inline-block;
margin-right:0.5em;
/* ボタンの文字の設定 */
/* その他必要なスタイル */
transition: all 0.3s ease;
text-decoration: none;
}
/* ハートの共通スタイル */
.text-AddAction1::before,
.text-AddAction1::after {
content: “”;
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
opacity: 0;
-ms-filter:none;
filter:none;
}
/* 左上のハートのスタイル */
.text-AddAction1::before {
background-image: url(‘https://www.intoku.info/blog/endou/img/heart-pink.svg’);
top: 0;
left: -12px;
}
/* 右下のハートのスタイル */
.text-AddAction1::after {
background-image: url(‘https://www.intoku.info/blog/endou/img/heart-reverse-pink.svg’);
bottom: -6px;
right: -14px;
}
/* ========= ホバー時のスタイル ======== */
/* ボタンホバー時の左上のハートのスタイル */
.text-AddAction1:hover::before {
animation: text-AddAction-Animation-heart 1.5s infinite ease-out;
}
/* ボタンホバー時の右下のハートのスタイル */
.text-AddAction1:hover::after {
animation: text-AddAction-Animation-heart 1.5s 0.2s infinite ease-out;
}
/* ========= アニメーションの設定 ======== */
@keyframes text-AddAction-Animation-heart {
0% {
transform: translateY(0) scale(1);
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
transform: translateY(-20px) scale(1.4);
opacity: 0;
}
}
コメント