源码：
链接：https://pan.baidu.com/s/1RvTTsE75o7JlN2bkibT-kw 提取码：powr
前言：
网页是由HTML和CSS写的，背景音乐和新闻列表有一点JS，对静态网页几乎没有影响，可删除。没有用到BootStrap之类的框架，对着官方网页F12，一点一点手写出来的，中间改动很多，类名都是照着官方网页源码起的，所以又臭又长。本人对前端了解不是很深入，对源码有问题的地方，尽量帮忙解决。
视频展示：点击跳转
01-项目目录
原神
audio 文件夹：存放网页需要的视频，例如：首页背景播放的视频等css 文件夹：存放 CSS 文件（link 标签引入）images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等js 文件夹：存放了一些简单的JS文件（可有可无），不影响主要的静态网页iconfont：原神图标index.html ：首页 HTML 文件
引入样式表
02-头部导航栏
HTML文件
CSS文件
/* 头部导航栏 */
.header {
display: flex;
width: 100%;
height: 66px;
position: fixed;
z-index: 999;
background-color: rgba(17, 17, 17, 0.75);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
transition: opacity 0.5s ease-out;
}
.audio-controller {
width: 29.5px;
height: 29.5px;
position: absolute;
top: 18.5px;
left: 70.5px;
cursor: pointer;
}
.header__logo--cut {
width: 317px;
margin-left: 8px;
overflow: hidden;
}
.header__logo--cut img {
width: 100%;
height: 100%;
margin-left: 22.5px;
object-fit: cover;
}
.header__navbar {
width: 800px;
margin-left: -45px;
padding-right: 10px;
display: inline-block;
}
.header_navitem a {
position: relative;
float: left;
line-height: 66px;
margin: 0 30px;
font-size: 17px;
color: #ccc;
letter-spacing: 0.5px;
}
.header_hover {
text-shadow: 0 0 10px #69e0ff, 0 0 20px #69e0ff, 0 0 40px #69e0ff;
color: white;
}
.header_navitem a:hover {
text-shadow: 0 0 10px #69e0ff, 0 0 40px #69e0ff, 0 0 40px #69e0ff;
color: #fff;
}
.header_Cloud {
position: absolute;
transition: all 0.2s ease-out 0s;
background-color: rgb(105, 224, 255);
height: 5px;
left: 310px;
width: 40px;
top: 0px;
}
.header__right {
position: absolute;
right: 30px;
height: 100%;
display: flex;
align-items: center;
}
.header__login {
cursor: pointer;
}
.login_cs {
display: flex;
align-items: center;
margin-right: 20px;
}
.login_cs span {
font-size: 17px;
color: #ccc;
}
.header__login .login_btn {
display: flex;
align-items: center;
padding: 0 10px;
font-size: 17px;
color: #ccc;
cursor: pointer;
}
.header__login img {
margin-left: 18px;
width: 27px;
height: 27px;
opacity: 0.6;
}
03-首页背景
HTML文件
CSS文件
.bgWrap {
width: 100%;
height: 745px;
overflow: hidden;
}
.bgWrap video {
width: 100%;
height: 100%;
object-fit: cover;
}
.poster__sign {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.qisheng {
position: absolute;
width: 161px;
height: 152px;
top: 71px;
right: 28px;
z-index: 6;
}
.poster__video--entry {
position: absolute;
top: 448px;
}
.poster_video {
position: relative;
display: block;
margin: -66px auto 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
}
.poster_video:hover {
transition: 0.2s;
background: transparent;
}
.poster_video::before {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 28px;
height: 28px;
transform: translate(-50%, -50%);
background: url(../image/home/播放.png) no-repeat;
background-position: center top;
}
.poster_video:hover::before {
background-position: center bottom;
}
/* 下载区域 */
.ys-download-pc__box {
display: flex;
position: absolute;
top: 536px;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: space-between;
width: 540px;
}
.ys-download-pc__box #img:hover {
filter: brightness(150%);
cursor: pointer;
transition: 0.3s linear;
}
.ys-download-pc__qr {
position: relative;
top: -14px;
}
.ys-download-pc__qr-code {
width: 102px;
height: 102px;
}
.ys-download-pc__qr-icon {
position: relative;
width: 29px;
height: 29px;
top: 66px;
left: 37px;
border: 2px solid #475e7d;
border-radius: 4px;
}
.ys-download-pc__ps4app {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.ys-download-pc__ps4app img {
width: 160px;
height: 55px;
}
.ys-download-pc__tapard {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.ys-download-pc__tapard img {
width: 160px;
height: 55px;
}
.ys-download-pc {
width: 112px;
height: 112px;
}
.poster__prohibit {
position: absolute;
top: 590px;
left: 20px;
width: 100px;
cursor: pointer;
}
.poster__prohibit img {
width: 100%;
}
.glide {
display: flex;
flex-direction: column;
position: absolute;
top: 690px;
}
.arrow {
width: 0;
height: 0;
border-top: 10px solid #fff;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
margin-bottom: 8px;
animation-name: arrow;
animation-iteration-count: infinite;
animation-duration: 1.5s;
animation-timing-function: linear;
}
.arrow_1 {
animation-delay: 0s;
}
.arrow_2 {
animation-delay: 0.5s;
}
.arrow_3 {
animation-delay: 1s;
}
@keyframes arrow {
50% {
opacity: 0;
}
}
04-新闻资讯
HTML文件
新闻资讯
- 最新
- 新闻
- 公告
- 活动
《原神》「神铸赋形」活动祈愿即将开启，「法器·不灭月华」「...
2023/07/25
《原神》「余火变相」活动祈愿现已开启
2023/07/25
《原神》「浮岳虹珠」活动祈愿现已开启
2023/07/25
《原神》「壁纸放送」
2023/07/29
烟绯生日快乐 | 嗯！味道很不错，我很喜欢！
2023/07/28
CSS文件
.new {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 910px;
color: #fff;
background: url(../image/new/新闻资讯.jpg)no-repeat center/cover;
}
.new h3 {
position: relative;
margin: 183px auto 60px;
font-size: 50px;
font-weight: 400;
text-align: center;
}
.new h3::before,
.new h3::after {
content: '';
position: absolute;
top: 50%;
width: 385px;
height: 14px;
background: url(../image/new/border.png) no-repeat right center/cover;
}
.new h3::before {
left: 0;
transform: translate(calc(-100% - 32px), -50%);
}
.new h3::after {
right: 0;
transform: translate(calc(100% + 32px), -50%) rotateY(180deg);
}
/* 新闻banner区域 */
.news_banner {
display: flex;
justify-content: center;
height: 400px;
margin: 0 auto;
}
.news_carousel {
width: 640px;
height: 400px;
overflow: hidden;
}
.swiper-img img {
width: 2560px;
height: 400px;
float: left;
margin: 0;
padding: 0;
}
.swiper-img {
margin: 0 auto;
position: relative;
display: flex;
flex-direction: row;
animation: carousel 10s linear infinite;
}
@keyframes carousel {
0% {
transform: translateX(0);
}
20% {
transform: translateX(0);
}
27% {
transform: translateX(-638.8px);
}
47% {
transform: translateX(-638.8px);
}
54% {
transform: translateX(-1279.8px);
}
74% {
transform: translateX(-1279.8px);
}
80% {
transform: translateX(-1920px);
}
100% {
transform: translateX(-1920px);
}
}
.news_carousel .imgdot ol {
position: relative;
display: flex;
bottom: 37px;
left: 263px;
}
.news_carousel .imgdot ol i {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
margin: 10px 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.imgdot .current {
background-color: #fff;
}
/* 新闻列表 */
.news__contents {
position: relative;
width: 640px;
height: 400px;
background: rgba(38, 18, 12, 0.62);
}
.news__tab__list__ul {
display: flex;
align-items: flex-start;
width: 592px;
margin: 35px auto 0;
border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}
.news__tab__list__ul li {
position: relative;
padding: 0 19px 12px;
font-size: 18px;
text-align: center;
cursor: pointer;
float: left;
}
.currenters {
color: #ffd49f;
border-bottom: 3px solid #ffd49f;
}
.tab_con {
width: 592px;
margin: 0 auto;
height: 260px;
cursor: pointer;
overflow: hidden;
}
.tab_con a {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 50px;
border-bottom: 2px solid rgba(255, 255, 255, 0.08);
box-sizing: content-box;
font-size: 16px;
color: #fff;
}
.tab_con a:hover {
cursor: pointer;
background: rgba(255, 212, 159, 0.06);
}
.item_p {
width: 480px;
height: 20px;
line-height: 20px;
padding-left: 11px;
}
.item_p2 {
color: rgba(255, 255, 255, 0.35);
}
.news__more {
position: absolute;
right: 33px;
bottom: 30px;
height: 22px;
line-height: 22px;
font-size: 18px;
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
padding-left: 38px;
background: url(../image/new/加号.png) no-repeat left center/22px;
}
05-城邦
HTML文件
CSS文件
.city {
width: 100%;
}
.city__list {
overflow: hidden;
}
.city__list-item {
position: relative;
width: 100%;
height: 260px;
background: center no-repeat;
background-size: 100% auto;
cursor: pointer;
overflow: hidden;
}
/* 没选中时的阴影 */
.city__list-item::before {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
.city__list-item:hover:not(.city__list-char)::before {
background: none;
}
.city__list-bg {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
block-size: 100% auto;
transition: transform 0.4s 0s ease-out;
background-size: cover;
}
.city__list-item a,
.city__list-item p {
display: inline-block;
position: relative;
z-index: 3;
font-size: 36px;
color: #fff;
line-height: 260px;
width: 100%;
height: 260px;
background: url(../image/city/宝石.png) center no-repeat;
background-size: 132px;
text-align: center;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
margin: 0 !important;
overflow: hidden;
}
.city__list p::after {
position: absolute;
bottom: 91px;
left: 50%;
transform: translateX(-50%);
display: block;
content: '';
width: 210px;
height: 10px;
background: url(../image/city/边框.png) center no-repeat;
background-size: 210px 10px;
opacity: 0;
}
.city__list-item:hover .city__list-bg {
transform: scale(1.1);
}
.city__list-item:hover p::after,
.city__list-item:hover a::after {
opacity: 1;
}
.city__list-item .city__list-char {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: calc(50% + 360px) 50%;
background-size: 960px 260px;
opacity: 0;
transition: all 0.2s 0s ease-in;
border: #fff solid 6px;
box-sizing: border-box;
}
.city ul li:hover .city__list-char {
opacity: 1;
}
.city__list-item3 {
background-image: url(../image/city/lastcontinue.jpg);
background-size: cover;
}
.city__list-item--disable {
pointer-events: none;
}
06-底部
HTML文件
CSS文件
.footer {
width: 100%;
padding-bottom: 35px;
margin: 0 auto;
background-color: #111;
}
.footer__socialbar {
display: flex;
z-index: 2;
list-style-type: none;
width: 100%;
height: 52px;
line-height: 52px;
background-color: #111;
justify-content: center;
align-items: center;
margin: 0 auto;
border-bottom: #1a1a1a solid 2px;
}
.footer__socialitem {
position: relative;
float: left;
width: 32px;
height: 32px;
line-height: 32px;
margin-right: 34px;
opacity: 0.4;
cursor: pointer;
background-size: cover;
}
.footer_end img {
width: 100%;
height: 400px;
}
好文推荐
您阅读本篇文章共花了：
发表评论