原神角色展示（HTML+CSS）

最新推荐文章于 2024-05-28 15:47:08 发布

木易#

最新推荐文章于 2024-05-28 15:47:08 发布

阅读量2.1k

点赞数 6

文章标签： html 前端 servlet

本文链接：https://blog.csdn.net/a19970128_/article/details/127375907

版权

首页:index.html

*{margin: 0;padding: 0;}/*初始化，内边距，外边距设置为0*/

a{text-decoration: none;/*取消文本超链接的下划线*/color: white;}

body{

background-size: 100%;

background-image: url(img/daoqi.jpg);

position: relative;

background-attachment: fixed;

}

/* 头部开始 */

.head{

width: 100%;

height: 85px;

background: rgba(0,0,0,0.5);

position: fixed;

display: flex;

text-align: center;

z-index: 9999;

}

.head .mihoyo{

width: 255.75px;

height: 85px;

}

.city{

width: 315.75px;

height: 90px;

padding: 30px;

font-size: 30px;

box-sizing: border-box;

}

/* 旁边介绍开始 */

.jieshao{

width: 120px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: rgba(0,0,0,0.5);

position: fixed;

left: 285px;

top: 267px;

color: #fff;

}

.jineng0{

width: 120px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: rgba(0,0,0,0.5);

position: fixed;

left: 285px;

top: 349px;

color: #fff;

}

.gushi0{

width: 120px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: rgba(0,0,0,0.5);

position: fixed;

left: 285px;

top: 429px;

color: #fff;

}

.jieshao,.jineng0,.gushi0{

transition: all 0.3s ease-in-out;

}

.jieshao:hover,.jineng0:hover,.gushi0:hover{

transform: scale(1.2);

}

.big-pic{

width: 379.8px;

height: 600px;

/* background-color: pink; */

position: fixed;

background-image: url(img/枫原万叶\ 全身.png);

background-size: 100%;

left: 1121px;

top: 170px;

z-index: 888;

}

/* 旁边介绍结束 */

.city1{

margin-left: 300px;

height:30px;

font-size: 30px;

padding: 30px;

flex: 1;

}

.city2{

height:30px;

font-size: 30px;

padding: 30px;

flex: 1;

}

.city3{

margin-right: 400px;

height:30px;

font-size: 30px;

padding: 30px;

flex: 1;

}

.bar{

width: 100%;

height: 80px;

/* background-color: pink; */

margin-top: 85px;

position: absolute;

}

/* 头部结束 */

/* 六个角色 */

.center{

width: 650px;

height: 70px;

/* background-color: blue; */

margin: 5px auto;

}

.bar-wrap{

float: left;

margin: 0 10px;

}

.bar-wrap:nth-of-type(2){

background-color: rgba(0,0,0,0.4);

border-radius: 15px;

transition: all 0.1s ease-in-out;

}

.bar-wrap:hover{

transform: translate(0,-8px);

}

/* 六个角色结束 */

/* 生日开始 */

.body1{

width: 700px;

/* height: 4000px; */

background-color:rgba(0,0,0,0.5);

margin: 0 auto;

margin-top: 10px;

}

.body1-img{

padding-top: 15px;

padding-left: 15px;

display: inline-block;

}

.birthday{

display: block;

float: right;

margin-top: 15px;

margin-right: 15px;

padding-top: 5px;

padding-left: 15px;

padding-bottom: 5px;

box-sizing: border-box;

width: 420.75px;

height: 250px;

background-color: #0000004D;

border-radius: 20px;

color: #fff;

font-size: 23px;

}

/* 生日结束 */

/* 介绍开始 */

.introduction{

width: 665px;

height: 99px;

background-color: #00000033;

margin: 0 auto;

border-radius: 20px;

margin-top: 10px;

margin-bottom: 15px;

padding-left: 20px;

padding-top: 10px;

box-sizing: border-box;

color: #fff;

font-size: 20px;

}

.juese-introduction{

width: 665px;

height: 440px;

background-color: #0000004D;

margin-top: 10px;

padding-left: 20px;

padding-top: 10px;

box-sizing: border-box;

margin: auto;

border-radius: 20px;

color: #fff;

font-size: 20px;

}

/* 介绍结束 */

/* 技能logo开始 */

.jineng{

width: 665px;

height: 49px;

line-height: 49px;

background-color: #0000004D;

margin: 15px auto;

border-radius: 15px;

text-align: center;

color: #fff;

font-size: 20px;

}

/* 技能logo结束 */

/* 技能介绍开始 */

.jineng-introduction{

width: 665px;

height: 759px;

margin: auto;

border-radius: 15px;

padding-left: 10px;

padding-top: 10px;

box-sizing: border-box;

color: #fff;

font-size: 20px;

background-color: #0000004D;

}

/* 技能介绍结束 */

/* 角色故事开始 */

.juese-story1{

width: 665px;

height: 49px;

line-height: 49px;

background-color: #0000004D;

margin: 15px auto;

border-radius: 15px;

text-align: center;

color: #fff;

font-size: 23px;

}

.story1-content{

width: 665px;

height: 499px;

margin: auto;

border-radius: 15px;

padding-left: 10px;

padding-top: 10px;

box-sizing: border-box;

color: #fff;

font-size: 20px;

background-color: #0000004D;

}

.juese-story2{

width: 665px;

height: 49px;

line-height: 49px;

background-color: #0000004D;

margin: 15px auto;

border-radius: 15px;

text-align: center;

color: #fff;

font-size: 23px;

}

.story2-content{

width: 665px;

height: 374px;

margin: auto;

border-radius: 15px;

padding-left: 10px;

padding-top: 10px;

box-sizing: border-box;

color: #fff;

font-size: 20px;

background-color: #0000004D;

}

.juese-story3{

width: 665px;

height: 49px;

line-height: 49px;

background-color: #0000004D;

margin: 15px auto;

border-radius: 15px;

text-align: center;

color: #fff;

font-size: 23px;

}

.story3-content{

width: 665px;

height: 624px;

margin: auto;

border-radius: 15px;

padding-left: 10px;

padding-top: 10px;

box-sizing: border-box;

color: #fff;

font-size: 20px;

background-color: #0000004D;

}

/* 角色故事结束 */

/* 尾部开始 */

.foot-wrap{

height: 100px;

text-align: center;

background-color: rgb(51,47,47);

padding: 30px;

position: relative;

z-index: 900;

}

/* 尾部结束 */

首页：index.html

<!DOCTYPE html>

<head>

<title>Document</title>

.daoqi{border-bottom: 5px solid #00FFFF;width: 90px;height:50px;margin-left: 20px;}

</style>

</head>

<body>

<!-- <div class="city" style="margin-left: 300px;"><a href="#">蒙德城</a></div>

</div>

</div>

</div>

⭐⭐⭐⭐⭐

<br>

生日：10月29日<br>

神之眼：风<br>

命之座：枫红<br>

所属：南十字船队<br>

武器类型：单手剑<br>

称号：红叶逐荒波

</div>

稻妻出身的浪人武士。为人谦和，个性温顺。<br>

年轻潇洒的外表下埋藏着许多往事。看似随性，心中却有独属于自己<br>

的行事准则。

</div>

心至「空」处，天地万物皆为「空；

<br>

心中「净」澈，万物天地皆为「净」。 ——万叶心悟

<br>

稻妻出身的浪人武士。为人谦和，个性温顺。

<br>

年轻潇洒的外表下埋藏着许多往事。看似随性，心中却有独属于自己的行事准则。

<br>

万叶流浪四方，白天赶路，夜晚枕天席地，不计寒暑，不求富贵，只愿心中一方天地平稳自在。

<br>

他虽常在野外留宿，却从不担心风雨将至。风雨也像避着他似的，总是绕道而行。

<br>

旁人好奇问起，万叶如实相告：听风观云是他独有的本事。人们不常留意天气变化，自然不知道其征兆。精于此道的万叶则不同，只要听见风声异常，感到四周潮湿，便知道是雨雪欲来，该回避了。

<br>

漫步天涯的万叶曾避开无数风雨雷雪。然而这一次，前方等待着他的将是一场史无前例的雷暴。

<br>

这一次，他不会绕行。雨与雷与他，终将相会于命运聚散之处。

<br>

「——隐隐风雷动，幽幽闻其声；纵使天无雨，吾亦留此地。」

</div>

<br>

      普通攻击进行至多五段的连续剑击。重击消耗一定体力，瞬间向前方挥出两剑。下落攻击从空中下坠冲击地面，攻击下落路径上的敌人，并在落地时造成范围伤害。若这次下落攻击经由千早振施放，则会转为施放下落攻击·乱岚拨止。下落攻击·乱岚拨止通过元素战技·千早振施放的下落攻击，造成的伤害将转化为风元素伤害，并在落地时施展秘剑产生小型的风穴，牵引附近的物体与敌人。

<br>

<br>

      施展如同冲风般激昂的秘剑，将敌人与物体牵引至所在位置，击飞范围内的敌人，造成风元素伤害，并借由喷薄的气流如登泷般腾空而起。枫原万叶因元素战技·千早振而升空后的10秒内并持续处于空中时，若进行下落攻击，则会施展格外强劲的下落攻击·乱岚拨止。点按可以在空中施放。长按积蓄力量后施展，相对于点按，在更大的范围内造成更高的风元素伤害。下落攻击·乱岚拨止通过元素战技·千早振施放的下落攻击，造成的伤害将转化为风元素伤害，并在落地时施展秘剑产生小型的风穴，牵引附近的物体与敌人。乱岚拨止造成的伤害视为下落攻击伤害。「枫袖起悲风，神代万世人百年，秋山落唐红。」」

<br>

<b>万叶之一刀</b>

<br>

      施展我流的奥义，斩出初岚般的一刀，造成风元素范围伤害。刀风会留下名为「流风秋野」的领域，对其中的敌人造成间歇的风元素伤害。元素转化若流风秋野在持续期间接触了水元素/火元素/冰元素/雷元素，则会获得对应元素属性，额外造成该元素附加伤害。这种转化在技能持续期间仅会发生一次。「须臾照见万世长，一叶便知天下秋。我欲凭切枫一闪，做万世之问叩——」

</div>

璃月武装船队「南十字」经年航行于海波之上，船员们早见惯了异域风情，甚至旗舰「死兆星」号上就有一名出身别国的水手。

<br>

水手是在「死兆星」号停泊于稻妻口岸——离岛时，被接上船的。

<br>

船长北斗与这位年轻人是朋友，他来时，北斗告诉手下们：「这位兄弟要在船上停留一段时日，大家多关照关照他。」

<br>

船员们相信北斗的眼光，也欣赏这个稻妻人一身好武艺又有预判天气的本事，所以，哪怕他不愿透露私事，仍同意将他留在船上。

<br>

然而，大家不会就此罢休，总是找些借口，旁敲侧击地打听他的经历。

<br>

「听说稻妻出产的刀剑非常了不起，而且越是大人物越是会用好刀，你的刀怎么样?厉不厉害?」