css描边爱心点赞动画

最新推荐文章于 2024-04-15 09:14:42 发布

cv全粘工程师

最新推荐文章于 2024-04-15 09:14:42 发布

阅读量613

点赞数

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Ge_Daye/article/details/127907947

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

简单的一个点赞动画

效果图（emm，本来想搞gif图的，但是别人的软件要钱，底下将就着看吧，可以自己cv运行一下）
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="box">
			<svg id="heart" t="1668675036189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2252" width="64" height="64"><path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z" p-id="2253"></path></svg>
		</div>
	</body>
	<script>
		let btn = document.getElementById("box");
		// animation: drawHeart 13s linear forwards;
		let icon = document.getElementById("heart");
		let status = false
		btn.addEventListener("click",()=>{
			if(status == false){
				icon.style = "animation: drawHeart 1s linear forwards;stroke: #d81e06;"
			}else{
				icon.style = ""
			}
			status = !status
		})
	</script>
	<style>
		body{
			background: #f5f5f5;
		}
		#box{
			width: 200px;
			height: 200px;
			margin: 300px auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#heart{
			fill: #fff;
			/* stroke属性,可应用于任何种类的线条,文字和元素,就像一个圆的轮廓 */
			/* stroke: #d81e06; */
			/* 线条宽度 */
			stroke-width: 40px;
			/* 设置线条为虚线,虚线的长度 */
			stroke-dasharray: 2600;
			/* 虚线的位移 */
			stroke-dashoffset: 2600;
			/* 端点为圆头 */
			stroke-linecap: round;
		}
		@keyframes drawHeart{
			0%{
			    stroke: #d81e06;
			    stroke-dashoffset: 2600;
			}
			25%{
			    stroke: #d81e06;
			    stroke-dashoffset: 0;
			    fill: #eee;
			}
			50%{
			    
				transform: scale(1);
			}
			75%{
			    transform: scale(1.2);
			}
			100%{
				stroke: #d81e06;
				stroke-dashoffset: 0;
				fill: #d81e06;
			    transform: scale(1);
			}
		}
	</style>
</html>