效果如下：

整体效果：

动态部分：

人物介绍部分通过缩放增强视觉冲击效果，使得网页更加灵动。

代码部分：

HTML代码：

  小黄人名片
Millions
  • 首页
  • 商城
  • 影视
  • 数码
  • 用户
  • 消息8艾格尼斯我的独角兽呢？21:23鲍勃今天你吃香蕉了吗17:16格鲁我的冰冻枪呢？8:56view all
  • 邮箱
斯图尔特
差不多是个青少年，凡事喜欢逞能，并不是很在意拯救小黄人们的计划。对他来说，享受冒险的乐趣远大于得到冒险的结果，所以他喜欢玩、吃东西、演奏音乐、跟妹子搭讪。
了解更多
凯文
三个小黄人之中的大哥哥，他特别有责任感，非常想做一个英雄。作为小黄人天团的男一号，他处处彰显大哥风范。给鲍勃擦污渍，给斯图尔特开路，甚至差点被当成香蕉吃掉。
了解更多
鲍勃
能代言“吓死宝宝”这句话的，非鲍勃莫属。鲍勃是三个小黄人中最小的，非常天真，对一切事物都充满好奇和爱心，但是鲍勃的胆子也比较小。所以，小熊成了他最好的寄托。
了解更多

css代码部分（body）：

.container{width: 100%;height: 100vh;background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)),url(格鲁.jpg);background-position: right bottom;background-repeat: no-repeat;}.img{width: 100%;height: 100vh;display: flex;}/* 对介绍卡片进行弹性盒布局 */.introduction{display: flex;justify-content: center;/* 元素位于容器的中心 */align-items: center;position: relative;top: 100px;}.card{position: relative;width: 300px;height:450px;margin: 20px;background-color: rgba(255,255, 255, 0.5);border-radius: 20px;/* 溢出隐藏 */overflow: hidden;/* 弹性布局 */display: flex;/* 图片字体纵向排列 */flex-direction: column;/* 图片、字体居中 */align-items: center;color: white;/* 盒子阴影 */box-shadow: 0 0 30px rgba(0,0,0,0.5);}.card .photo img{width: 100%;height: 100%;/* 保持原有尺寸比例，裁截长边 */object-fit: cover;}.card .photo{/* 使得照片关于card进行定位 */position: absolute;top: 0;/* 让图片填满整个card */width: 100%;height: 100%;overflow: hidden;transition: 0.5s;}/* 鼠标移入变小图 */.card:hover .photo{top: 30px;width: 120px;height: 120px;border-radius: 50%;box-shadow: 0 0 20px rgba(0,0,0,0.8);}.card h1{/* 使得h1关于card进行定位 */position: absolute;color: black;top: 5px;transition: 0.5s;}.card:hover h1{top:170px;color: white;width: 80%;text-align: center;border-bottom: 1px solid rgba(255,255, 255, 0.3);margin-bottom: 20px;padding-bottom: 20px;}.card p{margin-top: 260px;width: 90%;/* 缩进两个字符 */text-indent: 2em;font-size: 16px;margin-bottom: 15px;line-height: 25px;}.card a{font-size: 14px;color: rgba(255,255, 255, 0.8);border: 1px solid rgba(255,255, 255, 0.5);padding: 8px 32px;border-radius: 8px;}.card a:hover{color: white;background-color: rgba(0,0,0,0.2);}

导航栏部分的代码和网站首页部分的代码是几乎一样的，可以在这里复制粘贴(14条消息) HTML+CSS好看的小黄人网页制作（首页部分）_小独11的博客-CSDN博客

小黄人网站的网页部分就到这里啦！谢谢大家的观看和学习！