<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wanghao | Pokémon</title>
<style>
body {
background-image: linear-gradient(rgba(255, 233, 145, 0.6), rgba(255, 233, 145, 0.8));
}
h1, h2 {
text-align: center;
}
img {
max-width: 100%;
}
#title-img {
width: 50%;
display: block;
margin: auto;
}
.selection-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.monster {
position: relative;
margin: 5px;
width: 100px;
height: 100px;
background: #FFF;
border: solid 1px #000;
border-radius: 10px;
overflow: hidden;
}
.monster:hover {
cursor: pointer;
}
.monster-icon {
width: 100%;
position: absolute;
}
.monster-name-bg {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: rgba(255, 255, 255, 0.8);
}
.monster-name {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-size: 16px;
line-height: 0;
}
.selected {
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}
#battle-zone {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#user {
position: absolute;
top: 0;
left: 0;
width: 45%;
height: 400px;
}
#user .hp-outline{
bottom: 0
}
#player-section {
position: absolute;
bottom: 0;
left: 0;
width: 20%;
}
#player-monster-section {
position: absolute;
top: 20%;
bottom: 20%;
right: 0;
width: 30%;
}
#player-monster-image {
position: absolute;
bottom: 10%;
}
figcaption {
font-size: 20;
text-align: center;
font-weight: bold;
}
#opponent {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 400px;
}
#opponent .hp-outline {
top: 0
}
#opponent-section {
position: absolute;
top: 0;
right: 0;
width: 20%;
}
#opponent-monster-section {
position: absolute;
top: 20%;
bottom: 20%;
left: 0;
width: 30%;
}
#opponent-monster-image {
position: absolute;
top: 10%;
}
.hp-outline {
position: absolute;
width: 100%;
height: 10px;
background: #FFF;
border: solid 1px black;
border-radius: 10px;
overflow: hidden;
}
.hp-bar {
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(rgba(255, 60, 100, 0.7), rgba(255, 60, 100, 1));
height: 100%;
width: 100%;
}
.healing-glow {
opacity: 0.8;
}
#button-zone {
position: relative;
margin-top: 400px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
#attack-options, #heal-options, #pass-options {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
width: 20%;
}
button {
margin: 2px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
border: none;
font-size: 16px;
font-weight: bold;
}
#attack-options button {
background-image: linear-gradient(rgba(255, 100, 60, 0.7), rgba(255, 100, 60, 1));
}
#heal-options button {
background-image: linear-gradient(rgba(60, 100, 255, 0.7), rgba(60, 100, 255, 1));
}
#pass-options button {
background-image: linear-gradient(rgba(150, 150, 150, 0.7), rgba(150, 150, 150, 1));
}
#description-zone {
display: block;
margin: auto;
width: 97%;
height: 50px;
background: #FFF;
border: solid 1px black;
border-radius: 10px;
overflow: hidden;
}
.battle-description {
text-align: center;
}
footer {
text-align: center;
}
@media (max-device-width: 800px) {
#user {
height: 200px;
}
#player-section {
width: 30%;
}
#opponent {
height: 200px;
}
#opponent-section {
width: 30%;
}
figcaption {
font-size: 14px;
}
.hp-outline {
height: 5px;
}
#button-zone {
margin-top: 200px;
}
button {
padding-top: 10px;
padding-bottom: 10px;
}
#attack-options, #heal-options, #pass-options {
width: 33%;
}
}
.animation-target {
-webkit-animation: animation 1500ms linear both;
animation: animation 1500ms linear both;
}
/* Generated with Bounce.js. Edit at https://goo.gl/RLhtEx */
@-webkit-keyframes animation {
0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
2.14% { -webkit-transform: matrix3d(1.133, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 39.128, 0, 0, 1); transform: matrix3d(1.133, 0, 0, 0, 0, 1.133, 0, 0, 0, 0, 1, 0, 39.128, 0, 0, 1); }
2.87% { -webkit-transform: matrix3d(1.152, 0, 0, 0, 0, 1.152, 0, 0, 0, 0, 1, 0, 51.427, 0, 0, 1); transform: matrix3d(1.152, 0, 0, 0, 0, 1.152, 0, 0, 0, 0, 1, 0, 51.427, 0, 0, 1); }
4.27% { -webkit-transform: matrix3d(1.165, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 71.718, 0, 0, 1); transform: matrix3d(1.165, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 71.718, 0, 0, 1); }
5.74% { -webkit-transform: matrix3d(1.155, 0, 0, 0, 0, 1.155, 0, 0, 0, 0, 1, 0, 87.859, 0, 0, 1); transform: matrix3d(1.155, 0, 0, 0, 0, 1.155, 0, 0, 0, 0, 1, 0, 87.859, 0, 0, 1); }
8.48% { -webkit-transform: matrix3d(1.106, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 104.772, 0, 0, 1); transform: matrix3d(1.106, 0, 0, 0, 0, 1.106, 0, 0, 0, 0, 1, 0, 104.772, 0, 0, 1); }
8.61% { -webkit-transform: matrix3d(1.104, 0, 0, 0, 0, 1.104, 0, 0, 0, 0, 1, 0, 105.228, 0, 0, 1); transform: matrix3d(1.104, 0, 0, 0, 0, 1.104, 0, 0, 0, 0, 1, 0, 105.228, 0, 0, 1); }
11.48% { -webkit-transform: matrix3d(1.051, 0, 0, 0, 0, 1.051, 0, 0, 0, 0, 1, 0, 109.333, 0, 0, 1); transform: matrix3d(1.051, 0, 0, 0, 0, 1.051, 0, 0, 0, 0, 1, 0, 109.333, 0, 0, 1); }
12.61% { -webkit-transform: matrix3d(1.035, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 108.914, 0, 0, 1); transform: matrix3d(1.035, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 108.914, 0, 0, 1); }
16.82% { -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 104.22, 0, 0, 1); transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 104.22, 0, 0, 1); }
18.89% { -webkit-transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 102.063, 0, 0, 1); transform: matrix3d(0.994, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 102.063, 0, 0, 1); }
20.95% { -webkit-transform: matrix3d(0.992, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 100.578, 0, 0, 1); transform: matrix3d(0.992, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 100.578, 0, 0, 1); }
26.29% { -webkit-transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 99.377, 0, 0, 1); transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 99.377, 0, 0, 1); }
33.23% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 99.833, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 99.833, 0, 0, 1); }
33.33% { -webki
【前端素材】小游戏-宠物精灵对战游戏.zip
版权申诉
62 浏览量
2024-04-04
19:27:22
上传
评论
收藏 6KB ZIP 举报
【前端素材】小游戏-宠物精灵对战游戏.zip （1个子文件） 
宠物精灵对战游戏 
Pokemon.html 59KB资源评论
枫蜜柚子茶
- 粉丝: 6050
- 资源: 3700
最新资源
- 基于pytorch+Unet进行MRI肝脏图像分割源码+数据集+模型.zip
- 在Android Studio中开发一个Android App项目步骤
- 基于yolov8实现进行物体跟踪源码.zip
- Java多线程学习Java多线程学习Java多线程学习Java多线程学习.txt
- 算法数据结构-动态规划算法（Dynamic Programming）超详细总结加应用案例讲解.txt
- 2024最强秋招八股文（精简、纯手打）2024最强秋招八股文（精简、纯手打）.txt
- 基于tensorflow多特征融合的微表情识别python源码.zip
- 基于yolov8实现人脸检测的python源码+运行说明.zip
- Micron Memory DDR3 SDRAM 全系列AD集成库（原理图库+PCB封装库）.IntLib
- 基于tensorflow多特征融合的微表情识别python源码+详细使用说明.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
