first commit

历届学生/font-end-nine/项目练习/上课项目/js案例/水管鸟游戏/css/index.css

@@ -0,0 +1,190 @@
+* {
+    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;
+}
+
+.result {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 30px;
+    z-index: 999;
+}
+
+.ground {
+    position: absolute;
+    width: 100%;
+    height: 112px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+}
+
+.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;
+}
+
+.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 birdMotion {
+    0% {
+        background: url("../img/hn1.png");
+    }
+    50% {
+        background: url("../img/hn2.png");
+    }
+    100% {
+        background: url("../img/hn3.png");
+    }
+}
+
+@keyframes birdBlueMotion {
+    0% {
+        background: url("../img/hn_blue_1.png");
+    }
+    50% {
+        background: url("../img/hn_blue_2.png");
+    }
+    100% {
+        background: url("../img/hn_blue_3.png");
+    }
+}
+
+@keyframes birdRedMotion {
+    0% {
+        background: url("../img/hn_red_1.png");
+    }
+    50% {
+        background: url("../img/hn_red_2.png");
+    }
+    100% {
+        background: url("../img/hn_red_3.png");
+    }
+}
+
+
+
+.start {
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -40%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 999;
+}
+
+.start .play {
+    width: 60px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.start .bird_list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.start .bird_list img {
+    cursor: pointer;
+}
+
+.start .bird_list img:nth-child(2){
+    margin: 0 30px;
+}
+
+.start .menu {
+    margin: 20px 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #00000038;
+    color: #fff;
+    border-radius: 6px;
+}
+
+.start .menu .item {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
+    cursor: pointer;
+}
+
+.start .menu .item:first-child {
+    border-bottom: 0.5px solid #b9b9b9;
+}
+
+.pause {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    cursor: pointer;
+    z-index: 999;
+}
+
+
+
+
+.show {
+    display: block !important;
+}
+
+.hidden {
+    display: none !important;
+}
+
+audio {
+    display: none;
+}