绚烂多彩的点赞效果

最新推荐文章于 2022-10-27 12:34:37 发布

frontEnd-Engineer

最新推荐文章于 2022-10-27 12:34:37 发布

阅读量836

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css3 文章标签：点赞点赞效果多彩的点赞

本文链接：https://blog.youkuaiyun.com/qq_36341800/article/details/56480931

css3 专栏收录该内容

3 篇文章

订阅专栏

1. 今天模仿着一个大神写可以个绚烂多彩的点赞功能，希望能给需要的朋友们一些小小的帮助

看代码咯！代码中用到的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多彩的点赞效果</title>
		<style type="text/css">
			.container {
				width: 300px;
				height: 300px;
				margin:0 auto;
				text-align: center;
			}
			.starBox {
				width: 250px;
				height: 250px;
				position: relative;
			}
			.starBox span {
				display: inline-block;
				vertical-align: middle;
				margin-right: 10px;
				width: 50px;
				height: 50px;	
				float: left;		
			}
			.heart {
				position: absolute;
				left: -14px;
				background: url(web_heart_animation.png);
				background-repeat: no-repeat;
				background-position: left;
				background-size: 2900%;
				cursor: pointer;
			}
			@-webkit-keyframes startchange {
				0% {
					background-position: left;
				}
				100% {
					background-position: right;
				}
			}
			@keyframes startchange {
				0% {
					background-position: left;
				}
				100% {
					background-position: right;
				}
			}
			.heartChangeClass {
				display: inline-block;
				-webkit-animation-name: startchange;
				animation-name: startchange;
				-webkit-animation-duration: 0.8s; /*完成一个周期所用的时间*/
				animation-duration: 0.8s;
				-webkit-animation-iteration-count: 1; /*循环执行的次数*/
				animation-iteration-count: 1;
				-webkit-animation-timing-function: steps(28); /*从头到尾以相同的速度播放动画*/
				animation-timing-function: steps(28);
				background-position: right;
			}
			.likeCount {
				margin-top: 15px;
				margin-left: 8px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3>这是一个多彩的点赞效果查看效果！</h3>
			<div class="starBox">
				<span class="heart" id="like1" data-id="like"></span> 
				<span class="likeCount" id="likeCount1">12</span>
			</div>
		</div>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {
				$('body').on('click', '.heart', function () {
					var clickId = $(this).attr('data-id');
					var index = $(this).attr('id').split('like')[1];
					var clickTime = parseInt($('#likeCount'+ index).html());
					if(clickId == "like") {
						$(this).addClass('heartChangeClass').attr('data-id', 'unlike');
						$('#likeCount'+ index).html(clickTime + 1);
					}else {
						$(this).removeClass('heartChangeClass').attr('data-id', 'like');
						$('#likeCount'+ index).html(clickTime - 1);
						
					}
				});
			})
		</script>
	</body>
</html>

谢谢大家！