在學習HTML時，我們經常會遇到有趣的小項目，比如小人進入房屋，小人消失等等。下面我們就來看一下如何使用HTML代碼實現小人進入房屋和小人消失的效果。

<style>
.house{
width: 200px;
height: 150px;
background-color: #cd5c5c;
position: relative;
overflow: hidden;
}
.door{
width: 60px;
height: 120px;
background-color: #f5deb3;
position: absolute;
bottom: 0;
left: calc(50% - 30px);
}
.person{
width: 40px;
height: 40px;
background-color: #4169e1;
position: absolute;
bottom: 0;
left: 0;
transition: all 2s ease;
}
.person.hide{
bottom: -40px;
}
</style>
<div class="house">
<div class="door"></div>
<div class="person" id="person"></div>
</div>

以上是小人進入房屋的HTML代碼，我們可以看到，通過定義一個房屋的div和一個門的div，以及一個小人的div，我們就可以創建出一個小人進入房屋的效果。

接下來，我們來看一下小人消失的HTML代碼：

<style>
.container{
width: 200px;
height: 200px;
position: relative;
}
.person{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #4169e1;
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
opacity: 1;
transition: opacity 2s ease;
}
.person.hide{
opacity: 0;
}
</style>
<div class="container">
<div class="person" id="person"></div>
</div>

以上是小人消失的HTML代碼，我們可以看到，通過定義一個包含小人的div，以及定義小人的樣式和隱藏/顯示效果，我們就可以創建出一個小人消失的效果。