前端 HTML 网页项目 大鱼海棠 精美绝伦 中国风
南极Ou 2024-08-20 14:03:04 阅读 85
部分页面展示
比较喜欢中国画风，所以根据动漫电影 “大鱼海棠” 设计了一个前端的静态网页，我比较喜欢简约一点所以网页设计的比较简单，最后呢也是成功完成一个前端项目喽😊😊😊
项目视频展示
前端项目 大鱼海棠项目展示
首页
剧情简介
人物介绍
经典台词
项目部分源码展示
页面加载动画CSS样式
<code>/* 加载动画 */
/* 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"] {code>
position: fixed;
right: 5px;
bottom: 35px;
}
/* 熊猫底部字体 */
body a[class="panda-font"] {code>
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岁时，他接受成人礼，进入了人类世界，开始七天人类世界的探索。她化身成一只红色的海豚和她的伙伴们一同进入人类的海域。她看见了一座坐落在岸边的小木屋，而它的主人们却坐在一只小船上玩耍，当船上的少年和妹妹看到她们时，特别欢喜，从袋子里抛出鱼食喂那些海豚。
那位少年甚至在身上抹上鱼食跳进冰冷的海水中挑逗那些海豚。许多普通的海豚都赶来享受着盛大的美餐，如同一阵巨大的龙卷风。可那些红色的海豚见到少年游了过来，吓得四处逃窜。因为她们临走时都被告知不可靠近人类，所以她们只在海水深处游玩。可当她在第七天即将回到自己时界的时候，她与其它普通海豚被一张大网捕住了。
红色的海豚发出犀利的叫声，住在岸边的少年听到后，毅然决定在狂暴的惊天浪涛下去救这只素不相识的大鱼，他用短刀一次一次的尝试割断海豚身上的网绳，经过千辛万苦少年将最后一刀割断了她身上的最后一条网绳时，可却被她猛烈地挣扎时用尾巴将少年甩到了水底死了。她只好将少年身上的海豚萧拿走，回到了自己的世界，由于少年的死是她导致的，觉得很内疚，于是她为了让少年复活，用自己的一半寿命与灵婆做交易，换回了少年的灵魂形象——小海豚。她的好朋友湫发现了这个秘密，为了帮助椿，他还是保守着这个秘密，保护着这条可爱的小海豚，为小海豚站岗放哨，并为他取名为“鲲”。
一天，他们一不小心没藏好鲲，让椿的母亲发现了鲲，将鲲扔进了下水道。椿和湫进入下水道，发现了一个老婆子在那里掌管着一大群老鼠。这个婆子帮助他们找到了鲲。后来，天神降下了惩罚，发大水淹没了整个部落。湫用法力控制水天相交，想要帮助鲲返回人间。可她的族人一心想抓住并杀了鲲以平息了天神的怒火。于是，他们疯狂阻拦而且迫切的寻找被海水淹没的人们。最后，椿的奶奶和爷爷帮助了椿，救出了被海水淹没的人们，可椿却死了。
灵婆将椿复活，让她和鲲一齐去人间。湫送走了椿去人间的最后一程，并发誓自己要变作人间的一缕秋风永远陪伴在椿的身边。直到最后，椿才明白，是湫用自己的全部生命换来了椿的生命。
项目当中的部分视频展示
你以为你接受的是谁的爱
这让我明白了一个道理：对待曾经帮助自己的人，要学会感恩，学会报答……只有这样，才能成为像电影中椿、湫、少年等主人公那样具有大公无私精神的人。在这，我引用一句名言：“滴水之恩，当涌泉相报。”
<code>觉得触动到了你请 “👍点赞” ✍️评论” “❤️🔥收藏” 一键三连叭！
欧了，到这里我应该解释的差不多啦，我是南极，大胆做自己，活出精彩的人生👊👊👊
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。