用html+css+js编写一个六一快乐的动态页面
时间: 2023-08-23 17:03:42 浏览: 50
好的,我可以为你提供一个简单的六一快乐动态页面示例,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>六一快乐!</title>
<style type="text/css">
body {
background-color: #55acee;
}
h1 {
color: #fff;
text-align: center;
margin-top: 50px;
font-size: 50px;
animation: shake 0.5s linear infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(-20px); }
100% { transform: translateX(0); }
}
img {
display: block;
margin: 0 auto;
animation: fly 2s ease infinite alternate;
}
@keyframes fly {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
</style>
</head>
<body>
<h1>六一快乐!</h1>
<img src="https://img-blog.csdn.net/20180507111324415?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JlYXNvbnM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/50" width="200" height="200">
<script type="text/javascript">
var img = document.querySelector('img');
img.addEventListener('click', function() {
alert('六一快乐!');
});
</script>
</body>
</html>
```
这个页面包含一个标题、一张图片和一些动画效果。当你点击图片时,会弹出一个提示框,显示“六一快乐!”。你可以根据自己的需求进行修改和调整。