前端实现一个天线宝宝代码
时间: 2024-03-07 13:51:04 浏览: 18
以下是一个 HTML、CSS 和 JavaScript 实现的天线宝宝代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>天线宝宝</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="antenna"></div>
<div class="body">
<div class="face">
<div class="eyes"></div>
<div class="mouth"></div>
</div>
<div class="arms"></div>
<div class="legs"></div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
.container {
position: relative;
margin: 100px auto;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ffcc00;
}
.antenna {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 80px;
border-radius: 10px;
background-color: #ffcc00;
}
.body {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #ffcc00;
}
.face {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 2px 5px #333;
}
.eyes {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #000;
}
.mouth {
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 10px;
border-radius: 20px;
background-color: #000;
}
.arms {
position: absolute;
top: 70px;
left: -40px;
width: 80px;
height: 20px;
border-radius: 10px;
background-color: #fff;
transform: rotate(-30deg);
box-shadow: 0px 2px 5px #333;
}
.legs {
position: absolute;
top: 120px;
left: -20px;
width: 20px;
height: 40px;
border-radius: 10px;
background-color: #fff;
transform: rotate(30deg);
box-shadow: 0px 2px 5px #333;
}
```
JavaScript 代码:
```javascript
// 播放音频
function playAudio() {
var audio = new Audio('tinky-winky.mp3');
audio.play();
}
// 点击天线宝宝播放音频
var container = document.querySelector('.container');
container.addEventListener('click', function() {
playAudio();
});
```
注意:在 CSS 文件中,使用了绝对定位和 transform 属性来定位和旋转天线宝宝的各个部分。在 JavaScript 文件中,使用了 HTML5 的 Audio 对象来播放音频,当点击天线宝宝时,会触发播放音频的函数。