前端 HTML 网页项目 大鱼海棠 精美绝伦 中国风

部分页面展示

比较喜欢中国画风，所以根据动漫电影 “大鱼海棠” 设计了一个前端的静态网页，我比较喜欢简约一点所以网页设计的比较简单，最后呢也是成功完成一个前端项目喽😊😊😊

项目视频展示

前端项目 大鱼海棠项目展示

首页

剧情简介

人物介绍

经典台词

项目部分源码展示

页面加载动画CSS样式

/* 加载动画 */
/* body:hover .nav,
body:hover .main .banner,
body:hover .main .main-header,
body:hover .main .main-content,
body:hover #page2-main-heder-bg,
body:hover #page2-main-content .main-content-section:nth-of-type(2n + 1),
body:hover #page2-main-content .main-content-section:nth-of-type(2n),
body:hover #page2-main-content #main-content-section-bg,
body:hover .main .main-content .main-content-section:nth-of-type(2n+1),
body:hover .main .main-content .main-content-section:nth-of-type(2n),
body:hover .main .main-header .total-verse .verse:nth-child(odd),
body:hover .main .main-header .total-verse .verse:nth-child(even) {
  transition: all 1s;
  transform: translate(0);
  opacity: 0.9;
}

body:hover .main .accordion-container {
  transition: all 3s;
  transform: translateY(0px);
  transform: translateX(0px);
  width: 90%;
  opacity: 0.9;
} */

/* 导航栏加载动画 */
body .nav {
  transform: translateY(-100px);
}

/* 轮播图加载动画 */
body .main .banner {
  transform: translateX(-1000px);
  opacity: 0;
}

/* 主内容加载动画 */
body .main .main-content {
  transform: translateY(1000px);
  opacity: 0;
}

/* 剧情介绍页面加载动画 */
body #page2-main-heder-bg {
  transform: translateX(-1000px) skew(45deg);
  opacity: 0;
}

body #page2-main-content .main-content-section:nth-of-type(2n + 1) {
  transform: translateX(1000px);
  opacity: 0;
}

body #page2-main-content .main-content-section:nth-of-type(2n) {
  transform: translateX(-1000px);
  opacity: 0;
}

body #page2-main-content #main-content-section-bg {
  transform: translateX(1000px);
  opacity: 0;
}

/* 页面标题的加载动画 */
body .main .main-header {
  transform: translateX(1000px);
  opacity: 0;
}

/* 人物介绍加载动画 */
body .main .accordion-container {
  width: 0%;
  transform: translateX(-1000px);
  opacity: 0;
}

/* 人物介绍段落加载动画 */
body .main .main-content .main-content-section:nth-of-type(2n+1) {
  transform: translateX(-1300px);
}

body .main .main-content .main-content-section:nth-of-type(2n) {
  transform: translateX(1300px);
}

导航栏CSS样式

/* 清除默认样式 */
* {
  /* 清除外边距 */
  margin: 0;
  /* 清除内边距 */
  padding: 0;
  /* 清除列表项符号 */
  list-style: none;
  /* 开启盒子模型解析方式：內减模式 */
  box-sizing: border-box;
  /* 清除文本的装饰效果，下划线 */
  text-decoration: none;

  /* 为页面添加过渡样式 */
  transition: all 2s;

  /* border: 1px solid #000; */
}

/* body标签的样式 */
body {
  display: flex;
  /* 主轴垂直 */
  flex-direction: column;
  /* 主轴垂直居中 */
  justify-content: center;
  /* 侧轴水平居中 */
  align-items: center;

  height: 100%;
  font-family: "楷体";
  background: rgb(208, 203, 163);
}

/* 页面导航栏样式设置 */
body .nav {
  padding: 0px 15%;

  display: flex;
  justify-content: space-between;

  width: 100%;
  height: 90px;
  line-height: 90px;
  border-radius: 0px 0px 50px 50px;
  text-shadow: 3px 3px 8px #aaa;
}

/* 熊猫 */
body a[href="#nav"] {
  position: fixed;
  right: 5px;
  bottom: 35px;
}

/* 熊猫底部字体 */
body a[class="panda-font"] {
  position: fixed;
  right: 0px;
  bottom: 30px;
  font-size: 16px;
  font-weight: 700;
  color: rgb(180, 60, 10);
  text-shadow: 5px 5px 10px rgb(180, 60, 10);
}

/* 页面导航栏左侧样式 */
body .nav .nav-left {
  width: 15%;
  height: 100%;
  line-height: 100%;
}

body .nav .nav-left img {
  width: 100%;
  height: 100%;
  line-height: 80px;
}

/* 主页导航栏右侧样式 */
body .nav .nav-right {
  display: flex;
  justify-content: space-between;
  line-height: 80px;
  width: 70%;
  height: 100%;
  line-height: 80px;
  transition: all 1s;
}

/* 右侧列表项样式 */
body .nav .nav-right li {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

body .nav .nav-right li a {
  font-size: 16px;
  color: #fff;
}

body .nav .nav-right li a:hover {
  font-size: 16px;
  color: rgb(255, 126, 70);
  text-shadow: 3px 3px 8px rgb(255, 126, 70);
  font-weight: 700;
  transition: all 1s;
}

body .nav .nav-right .nav-active a {
  font-size: 16px;
  color: rgb(255, 126, 70);
  text-shadow: 3px 3px 8px rgb(255, 126, 70);
  font-weight: 700;
  transition: all 1s;
}

body .nav .nav-right:hover .nav-active a {
  text-shadow: 3px 3px 8px #aaa;
  color: #fff;
  font-weight: 400;
  transition: all 1s;
}

body .nav .nav-right .nav-active:hover a {
  font-size: 16px;
  color: rgb(255, 126, 70);
  text-shadow: 3px 3px 8px rgb(255, 126, 70);
  font-weight: 700;
  transition: all 1s;
}

body .nav .nav-right a~span {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

/* 主内容头部标题样式 */
body .main .main-header {
  margin-top: 30px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;
}

/* 主内容头部段落样式 */
body .main .main-header p {
  line-height: 2;
  font-weight: 700;
  color: black;
}

大鱼海棠背景故事

    椿是一位掌管海棠花的神，在她16岁时，他接受成人礼，进入了人类世界，开始七天人类世界的探索。她化身成一只红色的海豚和她的伙伴们一同进入人类的海域。她看见了一座坐落在岸边的小木屋，而它的主人们却坐在一只小船上玩耍，当船上的少年和妹妹看到她们时，特别欢喜，从袋子里抛出鱼食喂那些海豚。

    那位少年甚至在身上抹上鱼食跳进冰冷的海水中挑逗那些海豚。许多普通的海豚都赶来享受着盛大的美餐，如同一阵巨大的龙卷风。可那些红色的海豚见到少年游了过来，吓得四处逃窜。因为她们临走时都被告知不可靠近人类，所以她们只在海水深处游玩。可当她在第七天即将回到自己时界的时候，她与其它普通海豚被一张大网捕住了。

    红色的海豚发出犀利的叫声，住在岸边的少年听到后，毅然决定在狂暴的惊天浪涛下去救这只素不相识的大鱼，他用短刀一次一次的尝试割断海豚身上的网绳，经过千辛万苦少年将最后一刀割断了她身上的最后一条网绳时，可却被她猛烈地挣扎时用尾巴将少年甩到了水底死了。她只好将少年身上的海豚萧拿走，回到了自己的世界，由于少年的死是她导致的，觉得很内疚，于是她为了让少年复活，用自己的一半寿命与灵婆做交易，换回了少年的灵魂形象——小海豚。她的好朋友湫发现了这个秘密，为了帮助椿，他还是保守着这个秘密，保护着这条可爱的小海豚，为小海豚站岗放哨，并为他取名为“鲲”。

    一天，他们一不小心没藏好鲲，让椿的母亲发现了鲲，将鲲扔进了下水道。椿和湫进入下水道，发现了一个老婆子在那里掌管着一大群老鼠。这个婆子帮助他们找到了鲲。后来，天神降下了惩罚，发大水淹没了整个部落。湫用法力控制水天相交，想要帮助鲲返回人间。可她的族人一心想抓住并杀了鲲以平息了天神的怒火。于是，他们疯狂阻拦而且迫切的寻找被海水淹没的人们。最后，椿的奶奶和爷爷帮助了椿，救出了被海水淹没的人们，可椿却死了。

　　灵婆将椿复活，让她和鲲一齐去人间。湫送走了椿去人间的最后一程，并发誓自己要变作人间的一缕秋风永远陪伴在椿的身边。直到最后，椿才明白，是湫用自己的全部生命换来了椿的生命。

项目当中的部分视频展示

你以为你接受的是谁的爱

    这让我明白了一个道理：对待曾经帮助自己的人，要学会感恩。在这，我引用一句名言：“滴水之恩，当涌泉相报。”

**

觉得触动到了你请 “👍点赞” ✍️评论” “❤️‍🔥收藏” ​

​一键三连叭！**

欧了，到这里我应该解释的差不多啦，我是南极，大胆做自己，活出精彩的人生👊👊👊