用javascript,html,css.写一个绿色的树从地里破土而出,长出黄色星星的叶片
时间: 2024-03-26 07:41:58 浏览: 13
好的,下面是一个简单的示例代码,实现了一个绿色的树从地里破土而出,长出黄色星星的叶片:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>绿色的树</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="tree">
<div class="trunk"></div>
<div class="leaves">
<div class="star"></div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
```
CSS代码:
```css
.tree {
position: relative;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid green;
}
.trunk {
position: absolute;
bottom: 0;
left: -10px;
width: 40px;
height: 60px;
background-color: brown;
}
.leaves {
position: absolute;
bottom: 60px;
left: -40px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
transform: rotate(-45deg);
}
.star {
position: absolute;
top: 20px;
left: 20px;
width: 30px;
height: 30px;
background-image: url(star.png);
background-size: contain;
}
```
JavaScript代码:
```javascript
// 获取树的DOM元素
var tree = document.querySelector('.tree');
// 设置树从地里破土而出的动画
tree.animate([
{ transform: 'translateY(100px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 }
], {
duration: 1000,
easing: 'ease-in-out'
});
// 获取星星的DOM元素
var star = document.querySelector('.star');
// 设置星星出现的动画
star.animate([
{ opacity: 0, transform: 'scale(0.5)' },
{ opacity: 1, transform: 'scale(1.0)' }
], {
duration: 500,
delay: 1000,
easing: 'ease-in-out'
});
```
上述代码中,HTML定义了树的结构,CSS定义了树和星星的样式,JavaScript负责定义动画效果。在JavaScript中,我们使用了Web动画API来实现动画效果。具体来说,我们使用Element.animate()方法来定义动画效果,可以设置动画的持续时间、缓动函数、延迟时间等参数。