最近のウェブページでは、記事、ビデオ、写真のページで「いいね」ボタンを見つけることがよくあります。ボタンをクリックすることで、コンテンツの好き嫌いを表現できます。ほとんどの「いいね」ボタンはプレーンテキストボタンまたは画像ボタンです。特別なアニメーション効果を持たせたい場合は、CSS3またはJavaScriptを使用する必要があります。この記事では、主にSVGおよびCSS3テクノロジーを使用して、ハートハッシュアニメーションの「いいね」ボタンを紹介します。「いいね」ボタンを点灯すると、ボタンの周りにたくさんのカラフルなハートが表示されます。
エフェクトプレビュー
コード
HTMLコード
まず、SVGパスパスを使用してハートボタンを描画します。
<svg height="320" width="320" class="like" onclick="document.body.classList.toggle('liked')">
<path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90" fill="white"> <!-- 80 by 70 -->
</svg>
复制代码また、イベントを定義しonclickます。ハートボタンがクリックされると、CSSクラスはとをlike切り替えlikedます。
次のステップは、クリック後にハートボタンの周りに表示される要素、主にいくつかのカラフルなドットと、さまざまなスタイルと色のいくつかのSVG小さなハートを定義することです。コードは次のとおりです。
<div class="dot dot-1"></div>
<div class="dot dot-2"></div>
<div class="dot dot-3"></div>
<div class="dot dot-4"></div>
<div class="dot dot-5"></div>
<div class="dot dot-6"></div>
<div class="dot dot-7"></div>
<div class="dot dot-8"></div>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-3"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-4"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-5"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-6"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-7"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="40" width="40" viewBox="0 0 320 320" class="h h-8"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-1"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
<svg height="110" width="110" viewBox="0 0 320 320" class="fly fly-2"><path class="path" d="M 160 145 c 15 -90 170 -20 0 90 m 0 -90 c -15 -90 -170 -20 0 90"></svg>
复制代码これまで、HTMLとSVGを使用して、「いいね」のハートボタンとクリックされたアニメーション要素を描画してきました。次のステップは、対応するCSSを追加して、アニメーション効果を実現することです。
CSSコード
1つ目はSVGハートボタンのCSSコードで、クリックする前のデフォルトのスタイルです。
svg.like {
position: fixed;
z-index: 10;
top: calc(50vh - 160px);
left: calc(50vw - 160px);
border-radius: 100%;
-webkit-transform: scale(0.3);
transform: scale(0.3);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
box-shadow: 0 0 250px rgba(0, 0, 0, 0.4);
background: #212121;
cursor: pointer;
}
复制代码次に、ボタンをクリックすると、CSSクラスがに切り替わりliked、この時点でボタンが点滅し、多くのカラフルなドットとハートが飛び交います。点滅するアニメーションのコードは次のとおりです。
body.liked svg.like {
-webkit-animation: blink 1s forwards;
animation: blink 1s forwards;
}
@-webkit-keyframes blink {
10% {
-webkit-transform: scale(0.42);
transform: scale(0.42);
background: #8815b7;
}
100% {
background: #e01f4f;
}
}
@keyframes blink {
10% {
-webkit-transform: scale(0.42);
transform: scale(0.42);
background: #8815b7;
}
100% {
background: #e01f4f;
}
}
复制代码飛んでくる小さな点と小さなハートのアニメーションコードは次のとおりです。
body.liked svg.fly.fly-1 {
-webkit-animation: fly-1 1s 0.1s;
animation: fly-1 1s 0.1s;
}
body.liked svg.fly.fly-2 {
-webkit-animation: fly-2 1s 0.1s;
animation: fly-2 1s 0.1s;
}
@-webkit-keyframes fly-1 {
25% {
margin: -100px 0 0 100px;
}
75% {
margin: 100px 0 0 -100px;
z-index: 5;
}
100% {
z-index: 11;
}
}
@keyframes fly-1 {
25% {
margin: -100px 0 0 100px;
}
75% {
margin: 100px 0 0 -100px;
z-index: 5;
}
100% {
z-index: 11;
}
}
@-webkit-keyframes fly-2 {
25% {
margin: -100px 0 0 -100px;
}
75% {
margin: 100px 0 0 100px;
z-index: 5;
}
100% {
z-index: 11;
}
}
@keyframes fly-2 {
25% {
margin: -100px 0 0 -100px;
}
75% {
margin: 100px 0 0 100px;
z-index: 5;
}
100% {
z-index: 11;
}
}
复制代码最後に、カラフルなドットと小さなハートのCSSコードも投稿しました。
div.dot {
width: 12px;
height: 12px;
background: white;
position: fixed;
z-index: 9;
border-radius: 100%;
top: calc(50vh - 6px);
left: calc(50vw - 6px);
}
div.dot:before {
content: "";
width: 8px;
height: 8px;
border-radius: 100%;
top: -20px;
left: 2px;
position: absolute;
background: white;
}
div.dot:after {
content: "";
width: 11px;
height: 11px;
border-radius: 100%;
top: -160px;
left: 2px;
position: absolute;
background: white;
display: none;
}
body.liked div.dot {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
background: #00e5ff;
transition: opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s;
transition: transform 1s, opacity 0.5s 1s, background 0.1s 0.2s, -webkit-transform 1s;
}
body.liked div.dot:after {
display: block;
}
body.liked div.dot.dot-2 {
-webkit-transform: rotate(45deg) translateY(-100px);
transform: rotate(45deg) translateY(-100px);
}
body.liked div.dot.dot-3 {
-webkit-transform: rotate(90deg) translateY(-100px);
transform: rotate(90deg) translateY(-100px);
}
body.liked div.dot.dot-4 {
-webkit-transform: rotate(135deg) translateY(-100px);
transform: rotate(135deg) translateY(-100px);
}
body.liked div.dot.dot-5 {
-webkit-transform: rotate(180deg) translateY(-100px);
transform: rotate(180deg) translateY(-100px);
}
body.liked div.dot.dot-6 {
-webkit-transform: rotate(225deg) translateY(-100px);
transform: rotate(225deg) translateY(-100px);
}
body.liked div.dot.dot-7 {
-webkit-transform: rotate(270deg) translateY(-100px);
transform: rotate(270deg) translateY(-100px);
}
body.liked div.dot.dot-8 {
-webkit-transform: rotate(305deg) translateY(-100px);
transform: rotate(305deg) translateY(-100px);
}
复制代码この時点で、Likeheartボタンのアニメーション全体が完成します。記事の最後に、ソースコードもあなた専用です。
ソースコードのダウンロード
誰もがダウンロードして学習できるように、完全なコードのソースコードパッケージをコンパイルしました。
ソースコードのダウンロードリンク： mp.weixin.qq.com/s/rJK07Dr63…
コードは参照および学習のみを目的としています。商用目的で使用しないでください。
最終要約
この「いいね」ボタンのSVGおよびCSS実装は非常に創造的であり、一部の製品表示プラットフォームでの使用に適しています。さらに、「いいね」の後に表示されるカラフルなドットやハートについては、想像力を駆使して、他の要素を変更または追加することもできます。SVGは非常に柔軟であるため、好きな形を簡単に描くことができます。