html动态网页制作代码
时间: 2023-08-31 18:12:59 浏览: 56
以下是一个简单的 HTML 动态网页制作代码,使用了 JavaScript 和 CSS 实现了动态效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态网页制作</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes move {
from {left: 0;}
to {left: 200px;}
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.addEventListener("mouseover", function() {
box.style.backgroundColor = "blue";
});
box.addEventListener("mouseout", function() {
box.style.backgroundColor = "red";
});
</script>
</body>
</html>
```
这个网页会显示一个红色的正方形,不停地从左边移动到右边,然后又从右边移动回来。当鼠标移动到正方形上时,它会变成蓝色;当鼠标移开时,它会变回红色。这个网页使用了 CSS 动画和 JavaScript 事件监听器来实现动态效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.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)