html字体大小动态变化，会呼吸的字体

目标：使用css3实现字体大小动态的改变代码<!DOCTYPE html><html><head><meta charset="utf-8"><title>会呼吸的字体</title></head><style>.font1{animation:bian 5s infinite;-webkit-anim

hello big_bear

5128人浏览 · 2021-04-23 19:40:31

hello big_bear · 2021-04-23 19:40:31 发布

目标：

使用css3实现字体大小动态的改变，顺便实现字体的渐变效果。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会呼吸的字体</title>
	</head>
	
	<style>
		#bigbox{
		text-align: center;
		}
		.font1
		{
			animation:bian 5s infinite;
			-webkit-animation:bian 0.3s infinite; /*Safari and Chrome*/
			animation-direction:alternate;/* 反向执行动画 */
			font-weight: 600;
			background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
			-webkit-background-clip:text;
			-webkit-text-fill-color:transparent;
		}
		@keyframes bian
		{
			from {font-size:40px;}
			to {font-size:42px;}
		}
		@-webkit-keyframes bian /*Safari and Chrome*/
		{
			from {font-size:40px;}
			to {font-size:42px;}
		}
	</style>
	
	<body>
		<div id="bigbox">
			<span class="font1">糟了，这是心动的感觉</span>
		</div>
	</body>
</html>