我来为您绘制一张帅气的越野车头像吧。以下是一个完整的 HTML 代码示例,包含了 CSS 和 JavaScript 部分:
```html
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.car-icon {
position: relative;
width: 300px;
height: 150px;
}
.car-body {
position: absolute;
width: 100%;
height: 50%;
background-color: #333;
border-radius: 20px 20px 0 0;
}
.wheel {
position: absolute;
width: 40px;
height: 40px;
background-color: #333;
border-radius: 50%;
bottom: 0;
}
.wheel:nth-child(2) {
left: 50px;
}
.wheel:nth-child(3) {
right: 50px;
}
.headlight {
position: absolute;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
top: 25%;
}
.headlight:nth-child(4) {
left: 40px;
}
.headlight:nth-child(5) {
right: 40px;
}
// 添加一些动画效果
const wheels = document.querySelectorAll('.wheel');
wheels.forEach(wheel => {
wheel.addEventListener('animationiteration', () => {
wheel.style.transform = `rotate(${Math.random() * 360}deg)`;
});
wheel.style.animation = 'rotate 2s linear infinite';
});
```
这个代码生成了一个简单的越野车头像,使用 HTML、CSS 和 JavaScript 来实现。车身为黑色,加上轮子和前灯效果,整体看起来非常帅气。您可以根据自己的喜好调整样式和细节。如果需要其他帮助,欢迎随时告诉我。
查看详情
查看详情