如何在html中实现一个小人物或者小机器人图片或者动画然后旁边有提示框,显示提示信息
时间: 2023-12-10 10:38:25 浏览: 36
可以通过在HTML中嵌入一个图片,然后使用CSS设置其位置和动画效果。同时,在图片旁边添加一个提示框可以使用HTML和CSS中的组合。以下是一个示例代码:
```html
<div class="robot-wrapper">
<img src="robot.png" alt="Robot" class="robot">
<div class="tooltip">Hello, I am a robot!</div>
</div>
```
```css
.robot-wrapper {
position: relative;
}
.robot {
position: absolute;
top: 50px;
left: 50px;
animation: wave 0.5s infinite;
}
@keyframes wave {
0% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
.tooltip {
position: absolute;
top: 100px;
left: 80px;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
display: none;
}
.robot-wrapper:hover .tooltip {
display: block;
}
```
在上面的代码中,我们首先创建一个包含机器人图片和提示框的容器`robot-wrapper`,并将其设置为相对定位。然后,我们使用绝对定位将机器人图片放置在容器的左上角,并添加一个简单的旋转动画。接下来,我们创建了一个提示框`tooltip`,并将其设置为绝对定位。我们还将提示框的显示属性设置为`none`,这意味着默认情况下它不会显示。最后,我们使用CSS中的:hover伪类来显示提示框。