170 lines
3.0 KiB
CSS
170 lines
3.0 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-image: url("../img/back.png");
|
|
background-size: contain;
|
|
/* 等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 */
|
|
position: relative;
|
|
overflow: hidden;
|
|
/* 超过部分隐藏 */
|
|
user-select: none;
|
|
/* 属性规定是否能选取元素的文本 */
|
|
}
|
|
|
|
.ground {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 112px;
|
|
/* 高度为图片本身高度 */
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
.pause {
|
|
z-index: 1111;
|
|
}
|
|
.ground img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.bird {
|
|
width: 34px;
|
|
height: 24px;
|
|
position: absolute;
|
|
left: 100px;
|
|
transition: all linear 0.15s;
|
|
/* 设置所有属性都有动画属性 以相同速度开始至结束的过渡效果 */
|
|
z-index: 999;
|
|
}
|
|
.result {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: 30px;
|
|
z-index: 999;
|
|
}
|
|
.up {
|
|
transform: rotate(-38deg);
|
|
}
|
|
.down {
|
|
transform: rotate(90deg);
|
|
}
|
|
.sg {
|
|
width: 55px;
|
|
position: absolute;
|
|
}
|
|
|
|
@keyframes birdShake {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(10px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
/* 定义一个动画实现来回移动的过程 */
|
|
@keyframes yellowbird {
|
|
0% {
|
|
background: url("../img/hn1.png");
|
|
}
|
|
50% {
|
|
background: url("../img/hn2.png");
|
|
}
|
|
100% {
|
|
background: url("../img/hn3.png");
|
|
}
|
|
}
|
|
@keyframes bluebird {
|
|
0% {
|
|
background: url("../img/ln1.png");
|
|
}
|
|
50% {
|
|
background: url("../img/ln2.png");
|
|
}
|
|
100% {
|
|
background: url("../img/ln3.png");
|
|
}
|
|
}
|
|
@keyframes redbird {
|
|
0% {
|
|
background: url("../img/red1.png");
|
|
}
|
|
50% {
|
|
background: url("../img/red2.png");
|
|
}
|
|
100% {
|
|
background: url("../img/red3.png");
|
|
}
|
|
}
|
|
/* 定义一个动画使小鸟有3种动作 */
|
|
|
|
/* .bird_one {
|
|
background: url("../img/hn1.png");
|
|
} */
|
|
/* 小鸟的初始状态 */
|
|
.start {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 40%;
|
|
transform: translate(-50%, -40%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
.start .difficulty {
|
|
cursor: pointer;
|
|
background: #00000036;
|
|
font-size: 20px;
|
|
border-radius: 4px;
|
|
|
|
}
|
|
.start .difficulty .simpleMode{
|
|
margin-bottom: 10px;
|
|
}
|
|
.niao {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 45%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.niao .yellow {
|
|
margin-right: 20px;
|
|
}
|
|
.niao .blue {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.start .reset {
|
|
width: 60px;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
/* 是在计算机中将光标呈现为指示链接的指针（一只手） */
|
|
}
|
|
|
|
|
|
|
|
.show {
|
|
display: block;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
/* 定义两个通用css */ |