CSS3&JavaScript 仿视频直播中的点赞效果

最新推荐文章于 2025-03-07 14:44:04 发布

福州司马懿

最新推荐文章于 2025-03-07 14:44:04 发布

阅读量4.2k

点赞数 4

分类专栏： # CSS3 自定义控件 # JavaScript 自定义控件

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/85339095

版权

JavaScript 自定义控件同时被 2 个专栏收录

15 篇文章

订阅专栏

CSS3 自定义控件

14 篇文章

订阅专栏

接上一篇绘制桃心型的文章 https://blog.csdn.net/chy555chy/article/details/85275704 ，这次来实现视频直播中赞出现上浮爱心的效果
在这里插入图片描述
transition 动画我在前面的 “仿京东加入购物车” 效果中也有做过类似的，很好用。

<!DOCTYPE html>
<html>
<meta charset="utf8">
<head>
<style>
#loveContainer {
	position: relative;
	width: 100px;
	height: 200px;
	border: 1px solid black;
}
.float-love {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 0;
	transition: bottom 2s linear, left 1s ease-out, opacity 1s ease;
}
</style>
<script>
function fillLove(strokeColor, fillColor) {
	const canvas = document.createElement("canvas");
	canvas.className = "float-love"
	canvas.width = 35;
	canvas.height = 35;
	const ctx = canvas.getContext("2d");
	ctx.strokeStyle = strokeColor;
	ctx.lineWidth = 1.5;
	ctx.fillStyle = fillColor;
	ctx.save();
	ctx.translate(canvas.width/2, canvas.height/2);
	//绘制的坐标系是从左上角到右下角
	ctx.rotate(Math.PI);
	const part = 2 * Math.PI / 500;
	let t = 0;
	for(let i=0; i<500; i++,t+=part) {
		
		const x=16*Math.pow(Math.sin(t), 3);
		let y=14*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t)
		const tmp = Math.cos(t);
		ctx.lineTo(x,y);
	}
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	return canvas;
}
window.()=>{
	const loveContainer = document.getElementById("loveContainer");
	const firstLove = fillLove("#CCC", "red");
	loveContainer.appendChild(firstLove);
	const distance = 25;
	firstLove.onclick = function(){
		const love = fillLove("#CCC", "hsl("+parseInt(Math.random()*360)+", 70%, 70%)");
		loveContainer.insertBefore(love, firstLove);
		let isFirst = true;
		love.ontransitionend=(event)=>{
			switch(event.propertyName) {
				case "bottom":
					loveContainer.removeChild(love);
				break;
				case "left":
					love.style.left = firstLove.offsetLeft+"px";
					love.style.opacity = 0;
				break;
			}
		}
		/*
		由于谷歌浏览器并不支持transitionEnd事件，必须添加前缀
		有两点需要注意：
		(1)webkitTransitionEnd的大小写一定不能错
		(2)带前缀的不能用诸如 love.onwebkittransitionend、love.onWebkitTransitionEnd 这种方式绑定事件
		*/
		//love.addEventListener("webkitTransitionEnd", love.ontransitionend);
		setTimeout(()=>{
			love.style.bottom = "150px";
			const rnd = Math.random()*distance-distance/2;
			love.style.left = firstLove.offsetLeft+rnd+(rnd<0?-distance:distance)+"px";
		},100);
	}
}
</script>
</head>
<body>
<div id="loveContainer">
</div>
</body>
</html>