心形跳动样式

偶然在某一网站上看到了这一特效，感觉还不错，记录一下。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>Heartbeat</title>
		<style>
			svg {
				vertical-align:middle;
			}
			.icon {
				width:1.05em;
				height:1em;
				fill:currentColor;
				display:inline-block;
			}
			.footer-icon {
				margin:0 0.25em 0.3em;
				fill: #f06292;
			}
			@keyframes heartbeat {
				0%,100% {
					transform:scale(1);
				}
				10%,30% {
					transform:scale(0.9);
				}
				20%,40%,50%,60%,70%,80% {
					transform:scale(1.1);
				}
			}.footer-icon {
				animation:heartbeat 1.33s ease-in-out infinite;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon footer-icon">
			<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path>
		</svg>
	</body>
</html>

参考地址：https://v.ddup.io/

posted @ 2024-01-26 12:40  シ苁茈⒈個朲辵  阅读(30)  评论(0)    收藏  举报