我需要你将猫和老鼠的动画场景代码全部放入HTML中
时间: 2024-01-21 09:19:03 浏览: 28
好的,以下是一个简单的HTML代码,包含了猫和老鼠的动画场景:
``` html
<!DOCTYPE html>
<html>
<head>
<title>猫和老鼠的动画场景</title>
<style>
#cat {
position: absolute;
top: 150px;
left: 0;
animation: cat-walk 2s linear infinite;
transform-origin: 100% 50%;
}
#mouse {
position: absolute;
top: 200px;
left: 500px;
animation: mouse-run 2s linear infinite;
}
@keyframes cat-walk {
0% { transform: scaleX(-1) translateX(0); }
50% { transform: scaleX(-1) translateX(500px); }
100% { transform: scaleX(-1) translateX(0); }
}
@keyframes mouse-run {
0% { transform: translateX(0); }
50% { transform: translateX(-500px); }
100% { transform: translateX(0); }
}
</style>
</head>
<body>
<div id="cat">
<img src="cat.png" alt="猫">
</div>
<div id="mouse">
<img src="mouse.png" alt="老鼠">
</div>
</body>
</html>
```
请注意,以上代码只是一个简单的演示,实际上还需要更多的CSS和JavaScript代码来实现更复杂的动画效果。同时,你需要将`cat.png`和`mouse.png`这两张图片放在同一个目录下,以便能够正确地加载它们。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)