HTML 实现会动的卡通动画 - 简单代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>会动的卡通</title>
	<style type='text/css'>
		body{
			background-color: #f5f5f5;
		}
		.cartoon{
			position: relative;
			top: 100px;
			left: 100px;
			width: 200px;
			height: 200px;
			background-image: url('https://i.loli.net/2021/05/27/mhYKUQp8iR5f1W3.png');
			background-size: cover;
			animation: move 2s linear infinite;
		}
		@keyframes move{
			0%{
				left: 100px;
			}
			50%{
				left: 400px;
				transform: scaleX(-1);
			}
			100%{
				left: 100px;
				transform: scaleX(1);
			}
		}
	</style>
</head>
<body>
	<div class='cartoon'></div>
</body>
</html> 
<p>说明：这是一个简单的HTML代码，通过使用CSS的动画效果让卡通人物在页面上来回移动。其中，使用了background-image属性来设置卡通人物的背景图像，使用animation属性来设置动画效果，通过@keyframes关键字定义动画的关键帧，实现卡通人物左右移动的效果。</p>