2.使用脚本语言制作一个具有动画效应的页面。
时间: 2024-03-24 09:35:55 浏览: 30
非常感谢您的问题!制作动画效果的页面有很多种方法,其中一种比较常用的是使用 JavaScript 和 CSS3。
以下是一个简单的示例代码,可以实现点击按钮时,文字向上滑动并且背景颜色变化的动画效果:
HTML 代码:
```html
<div class="container">
<h1>Hello World!</h1>
<button onclick="animate()">Animate</button>
</div>
```
CSS 代码:
```css
.container {
position: relative;
height: 200px;
background-color: #f0f0f0;
text-align: center;
}
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.animate {
background-color: #ff9900;
animation: slideUp 1s ease-in-out forwards;
}
@keyframes slideUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
```
JavaScript 代码:
```javascript
function animate() {
const container = document.querySelector('.container');
container.classList.add('animate');
}
```
当点击按钮时,JavaScript 会获取到 container 元素,然后通过添加 .animate 类,触发 CSS 中定义的动画效果。动画效果是通过 CSS3 中的 @keyframes 定义的。
这只是一个简单的示例,您可以通过学习 JavaScript 和 CSS3,创造出更加复杂、精美的动画效果。