原神角色展示（HTML+CSS）

首页: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>

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

<br>

...

<br>

对此，他只会保持沉默。<br>

如此尝试了许多次，从未得到答案，船员们只得放弃。<br>

直到数天后，大副重佐随口—句抱怨，却引来了意料之外的回答。<br>

「喂稻妻来的，你都没个名字，叫兄弟们怎么称呼你啊...」<br>

水手抬起布满粗茧的手，擦了擦汗。<br>

「我姓枫原，名万叶，原本是一名浪人武士。承蒙收留，大家请直接叫我万叶吧。

</div>

万叶本非庶民，而是昔年的稻妻贵胄——枫原家的末代子弟。<br>

在豪门林立的稻妻城中，枫原一姓也曾叱咤风云。然而时运无常，当家业传至万叶手中时，枫原家已经是颓势如山倒了。<br>

对于这一点，当时的少爷万叶颇为无奈。虽说无奈，可真到了宅屋抵债、家仆散去的那一刻，他反倒松了口气：以此为契机，做个浪迹天涯的自在人也不错。<br>

漫游山林一直是万叶的心愿。自幼年起，他便懂得欣赏自然的美与真。<br>

对万叶而言，自然从不是静默的。它一直在用独特的语言诉说心情。<br>

风声忽而止息，万物静默，那是天空垂泪前的平静。清泉忽而跃起，即是大地震怒的征兆。<br>

这是自然赠予他的独特诗性，万叶生来就不是汲汲于荣华之人。既然家族重担不再，那么便轻装上路吧。<br>

仿佛庭院中垂下一片落叶，随风散入天涯，万叶开始了他的旅程。

</div>

旅人在外行走，总要有些傍身功夫。听风观云的本事，便是万叶的底牌。<br>

离开稻妻城之后，万叶四处游历。自从踏上旅途，一切都变得不同了：天地山海成了他最亲近的家园，走在云下听着风声水声，身心总是无比舒畅。<br>

一路的见闻，更令他倍感新奇。如此心境之中，万叶来到了位于南边的一座山丘。<br>

初夏多雨，山路因而变得泥泞。眼看夜晚降临，万叶想找一处屋舍避雨，甫一转身，便在路的尽头看见了一座草庵。<br>

同在赶路的还有一位偶然结识的行商，见此草庵，不由得欢呼起来：「万叶快看！晚上有地方住了！」<br>

万叶却不作声，侧耳倾听了许久，才道：若要问我的意见...恐怕还是不去为好<br>

行商不愿淋在雨中，当即丢下万叶，—人去了草庵。<br>

行商敲门后，有一位相貌美丽的妇人出来迎接，请他入内避雨，并为他端来香茶、美味饭食与被褥。<br>

或许是食物太过美味，行商吃着吃着便困了，倒头就睡。<br>

再度醒来已是次日凌晨，头上的房顶不知哪儿去了，阳光直射在脸上无比刺目，视野内只有万叶，正笑着俯视他。<br>

行商未等开口就吐出了大把嚼过的树叶与泥巴。至于身下，哪有什么被褥，只是脏兮兮的泥地而已。<br>

万叶笑道:「有房屋的地方，风声会比别处轻些。可这山上风声照常，面前却有一处突如其来的草庵。依我看，你多半是被狸妖捉弄了吧?哎呀...出门行走，可得多听风声、多留个心眼啊。」

</div>

<span>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</span><br>

<span>沪ICP备19018275号-4 | 沪网文〔2019〕3168-216号 | 国新出审【2019】2978号</span><br>

</div>

</body>

</html>

原神角色展示（HTML+CSS）相关推荐

nonebot 原神角色查询插件
文章目录前言一.使用命令及方法 1.使用命令 2.使用方法二.代码部分 1.引入库 2.完整代码总结前言本插件基于nonebot框架进行创作作者萌新源作者QQ:1648576390 交 ...
nonebot2 原神角色查询插件
今天为你们带来的是原神角色查询插件功能是可以在群里查询各种角色的属性等 """ 作者:萌新源时间:2022/3/30 操作系统:debian for raspberr ...
【C++】原神角色管理系统——基于vs的系统开发
首先成果展示给大家放上链接: B站:[原神]原神系统演示_原神以下是代码部分(有点长): #include <iostream> #include <fstream> #in ...
将原神角色导入unity 完整版
一.角色导入首先需要获取角色模型,获取方式可以从原神官网获取,这里采用从模之屋进行获取,进入模之屋后搜索自己想要的角色,然后下载压缩包并解压. 模之屋:专业模型创作分享社区_模之屋_ ...
20行代码爬取原神角色全图
python爬取原神官网所有角色的全身图需要的工具 python环境原神首页链接 https://ys.mihoyo.com/main/ 一个.py文件话不多说,直接开整用到的库有 impor ...
[PaddleSpeech] 音色克隆之原神角色＜胡桃＞
[PaddleSpeech 原神] 音色克隆之胡桃随着直播和短视频的火热流行,配音成为了一个很有"钱途"的行业 PaddleSpeech的出现,让我们快速又简单的上手音色克隆. ...
Flutter--简易的原神角色培养计算器
原来你也玩原神?!!! 输入你的当前面板属性,计算结果得到攻击暴击爆伤的收益系数,选择系数大的去提升,这样一点点修正培养,你就可以越来越接近理论最大值. 注意:输入的暴击/爆伤比如是 50%, 计算时 ...
有趣的Python爬虫-原神角色查询程序
目录 1.网页分析抓包 2.代码编写使用Python制作的角色查询功能现已制作成Nonebot2插件,可在我的群里拿取插件包. 1.网页分析抓包对于这种动态网页我们去爬取网页的html代码是得 ...
【原神】各角色Pixiv涩图统计(一). 最多的是谁? R18涩图谁最多?
统计的结果请见第一篇文章. 代码已经开源至GitHub 本文下面所有的爬虫项目都有详细的配套教程以及源码,都已经打包好上传到百度云了,链接在文章结尾处! 扫码此处领取大家自行获取即可~~~ 讲真, 这 ...
《原神》——开放世界二次元游戏的一些见解和建议
一.原神在海外的布局原神商业化的成功绝对离不开其海外的布局,截止目前的数据来看,原神在海外的市场带来的商业化价值已经和国内相近甚至更高.原神不仅在多国拿到付费榜榜首的好成绩,并且在12月1日,谷歌公 ...

原神角色展示（HTML+CSS）

原神角色展示（HTML+CSS）相关推荐

最新文章

热门文章