动态心点赞（粘贴即可使用h5代码和vue代码）

最新推荐文章于 2023-03-31 16:04:40 发布

weixin_43431702

最新推荐文章于 2023-03-31 16:04:40 发布

阅读量428

点赞数

本文链接：https://blog.csdn.net/weixin_43431702/article/details/106054360

版权

1、html文件

<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Twitter红心点赞CSS3动画按钮特效</title>
		<style type="text/css">
			
			#container {
				margin: 0 auto;
				width: 900px;
				font-family: arial;
			}

			#container h3 {
				font-family: "Microsoft YaHei";
			}
			.heart {
				background: url('http://product.armark.com.cn/echolac/res/image/Fu3O0aVNZihP-qi7NCH0epcFnju_.png');
				background-position: left;
				background-repeat: no-repeat;
				height: 100px;
				width: 100px;
				cursor: pointer;
				position: absolute;
				left: -14px;
				background-size: 2900%;
			}

			.heart:hover,
			.heart:focus {
				background-position: right;
			}

			@-webkit-keyframes heartBlast {
				0% {
					background-position: left;
				}

				100% {
					background-position: right;
				}
			}

			@keyframes heartBlast {
				0% {
					background-position: left;
				}

				100% {
					background-position: right;
				}
			}

			.heartAnimation {
				display: inline-block;
				-webkit-animation-name: heartBlast;
				animation-name: heartBlast;
				-webkit-animation-duration: .8s;
				animation-duration: .8s;
				-webkit-animation-iteration-count: 1;
				animation-iteration-count: 1;
				-webkit-animation-timing-function: steps(28);
				animation-timing-function: steps(28);
				background-position: right;
			}

			.feed p {
				font-family: "Microsoft YaHei", 'Georgia', Times, Times New Roman, serif;
				font-size: 25px;
			}

			.feed {
				clear: both;
				margin-bottom: :20px;
				height: 150px;
				position: relative;
			}

			.likeCount {
				font-family: 'Georgia', Times, Times New Roman, serif;
				margin-top: 32px;
				margin-left: 68px;
				font-size: 25px;
				color: #999999
			}
		</style>

	</head>
	<body>

		<article class="htmleaf-container">
			<div id="container">
				<h3>点击下面的红心查看效果！</h3>

				<div class="feed" id="feed1">
					<p>W3C </p>
					<div class="heart " id="like1" rel="like"></div>
					<div class="likeCount" id="likeCount1">14</div>
				</div>

				<div class="feed" id="feed2">
					<p>百度一下</p>
					<div class="heart" id="like2" rel="like"></div>
					<div class="likeCount" id="likeCount2">10</div>
				</div>

			</div>

		</article>

		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {

				$('body').on("click", '.heart', function() {

					var A = $(this).attr("id");
					var B = A.split("like");
					var messageID = B[1];
					var C = parseInt($("#likeCount" + messageID).html());
					$(this).css("background-position", "")
					var D = $(this).attr("rel");

					if (D === 'like') {
						$("#likeCount" + messageID).html(C + 1);
						$(this).addClass("heartAnimation").attr("rel", "unlike");
					} else {
						$("#likeCount" + messageID).html(C - 1);
						$(this).removeClass("heartAnimation").attr("rel", "like");
						$(this).css("background-position", "left");
					}
				});

			});
		</script>

	</body>
</html>

2.vue

<template>
	<view class="lock-main">
		<div>
			<div class="heart" :style='{"background-position":bakPo}' :class="{'heartAnimation':heartAnimation}" @click="heartLiske"></div>
			<div class="likeCount">{{likeCount}}</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				heartAnimation: false,
				bakPo: 'left',
				likeCount: 14
			}
		},
		methods: {
			heartLiske() {
				this.heartAnimation ? this.likeCount-- : this.likeCount++
				this.bakPo = ""
				this.bakPo = this.heartAnimation ? "left" : "right"
				this.heartAnimation = this.heartAnimation ? false : true
				console.log(this.likeCount)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lock-main {
		color: #fff;
	}

	.heart {
		background: url('http://product.armark.com.cn/echolac/res/image/Fu3O0aVNZihP-qi7NCH0epcFnju_.png');
		background-repeat: no-repeat;
		height: 100px;
		width: 100px;
		cursor: pointer;
		background-size: 2900%;
	}

	@-webkit-keyframes heartBlast {
		0% {
			background-position: left;
		}

		100% {
			background-position: right;
		}
	}

	@keyframes heartBlast {
		0% {
			background-position: left;
		}

		100% {
			background-position: right;
		}
	}

	.heartAnimation {
		display: inline-block;
		-webkit-animation-name: heartBlast;
		animation-name: heartBlast;
		-webkit-animation-duration: .8s;
		animation-duration: .8s;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
		-webkit-animation-timing-function: steps(28);
		animation-timing-function: steps(28);
		background-position: right;
	}
</style>

weixin_43431702

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态心点赞（粘贴即可使用h5代码和vue代码）

1、html文件<!doctype html><html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫