HTML+CSS实战任务：小熊宝宝交互效果-CSDN博客

本文链接：https://blog.csdn.net/howard2005/article/details/148119898

文章目录

1. 任务目标
2. 任务要求
3. 实现步骤
4. 实战小结

1. 任务目标

通过HTML和CSS实现一个简单的交互效果：当鼠标悬停在按钮上时，显示一个图片；鼠标移开时，图片隐藏。掌握HTML基本结构、CSS选择器及伪类的使用，以及它们之间的交互逻辑。

2. 任务要求

2.1 页面布局

页面内容居中显示
页面背景颜色设置为“antiquewhite”
按钮和图片的布局合理，美观

2.2 按钮样式

按钮上显示文字“小熊宝宝”
按钮的样式可以自定义，但需要与页面整体风格协调

2.3 图片显示与隐藏

图片初始状态为隐藏（透明度为0）
当鼠标悬停在按钮上时，图片显示（透明度为1）
当鼠标移出按钮时，图片隐藏

2.4 图片资源

使用本地图片资源（文件名为bear.png），确保图片路径正确
如果没有bear.png图片，可以使用网络图片资源代替

2.5 代码规范

HTML代码结构清晰，语义化标签使用合理
CSS代码简洁，选择器使用正确，注释清晰

3. 实现步骤

3.1 创建HTML文件

利用HBuilder创建一个新的HTML文件，命名为index.html
单击【创建】按钮
编写HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小熊宝宝交互效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box">
        <!-- 按钮用于触发图片显示 -->
        <button class="bear_button">小熊宝宝</button>
        <!-- 图片容器 -->
        <div class="bear">
            <!-- 图片，默认隐藏 -->
            <img width="200px" height="200px" src="bear.png" alt="小熊宝宝">
        </div>
    </div>
</body>
</html>

确保图片路径正确。如果使用本地图片，将bear.png放在与HTML文件相同的目录下。

3.2 创建CSS文件

在与HTML文件相同的目录下，创建一个新的CSS文件，命名为styles.css
单击【创建】按钮
编写CSS代码

/* 设置页面整体样式 */
body {
    text-align: center; /* 内容居中显示 */
    background-color: antiquewhite; /* 设置背景颜色为古董白 */
}

/* 图片容器的初始样式 */
.bear {
    opacity: 0; /* 图片默认隐藏，透明度为0 */
    margin-top: 10px; /* 图片与按钮之间的间距 */
    transition: opacity 0.5s ease; /* 添加过渡效果，使图片显示和隐藏更平滑 */
}

/* 按钮悬停时显示图片 */
.bear_button:hover ~ .bear {
    opacity: 1; /* 当鼠标悬停在按钮上时，图片显示（透明度为1） */
}

/* 自定义按钮的基本样式 */
.bear_button {
    background: #3498db; /* 按钮背景颜色为蓝色 */
    color: white; /* 按钮文字颜色为白色 */
    padding: 12px 25px; /* 按钮内边距，上下12px，左右25px */
    border-radius: 25px; /* 按钮圆角半径为25px */
    cursor: pointer; /* 鼠标悬停时显示为手型光标 */
    transition: 0.3s; /* 添加过渡效果，使背景颜色变化更平滑 */
    display: inline-block; /* 按钮以行内块方式显示 */
}

/* 按钮悬停时的样式 */
.bear_button:hover {
    background: #2980b9; /* 按钮悬停时背景颜色变为深蓝色 */
}

以上代码实现了按钮悬停时图片显示的效果。

3.3 测试页面交互效果

打开HTML文件，查看index页面
将鼠标悬停在按钮上，观察图片是否显示；移出按钮，观察图片是否隐藏。

4. 实战小结

通过本次实战，我成功实现了HTML和CSS的交互效果：当鼠标悬停在按钮上时，图片会显示；鼠标移开后，图片会隐藏。这个过程让我更加熟悉了HTML的基本结构和CSS选择器的使用，尤其是:hover伪类和兄弟选择器~的应用。同时，我也学会了如何通过opacity和transition属性来实现平滑的显示和隐藏效果。在实战过程中，我注意到了代码规范的重要性，清晰的注释和合理的文件结构不仅有助于他人理解代码，也方便了后续的维护和调试。此外，确保图片路径的正确性也是实现功能的关键步骤之一。