类似于 INSTAGRAM 中的“喜欢”按钮 [关闭]

Question

所以问题是我正在开发一个电子商务网站，用户可以在这里“喜欢”或“不喜欢”他们购买的商品。 我一直在寻找一个按钮作为 INSTAGRAM 中的按钮 - 单击时心形变为红色并在过渡期间显示轻微动画。

我在 Bootstrap 中使用了一个字形图标，即笑脸图标，并且很好地使用 background-color:yellow; 来更改图标所在的正方形的颜色。

我不太擅长 jquery 和其他东西，所以我希望如果可能的话，我希望在 CSS 中实现这一点。或者我应该使用两张不同的图片。

Answer 1

在平面 css 中，持续更改 - 意味着您单击某物，它会更改其外观并且永远不会更改回来 - 是不可能的。 您可以在 css 中做的就是对悬停产生效果，但是当您的鼠标停止悬停在“心脏”上时它会消失。
我真的会推荐使用 jQuery，它使用简单，有时每个人都会迈出第一步，你不会后悔有一点经验。

在 jQuery 中，您可以将 .click() 事件应用于您的喜欢按钮，如果它被触发，请使用 .animate() 放大它并在 200 毫秒的过渡中更改其背景颜色，然后反向放大，还有animate()。

这是最漂亮和最简单的方法，如果你想创建一个类似电子商务的网站，它必须通过外观来吸引人们，无论如何如果没有 jQuery，你将无法正确地做到这一点。