first commit

历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/js作业/水管鸟/css/index.css

@@ -0,0 +1,128 @@
+*{
+    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;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 7rem;
+    z-index: 50;
+}
+.ground img{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+.start{
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%,-50%);
+    /* 开启弹性盒子，上下排列,水平对齐 */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 999;
+}
+.play{
+    width: 60px;
+    margin-top: 24px;
+    cursor: pointer;
+}
+.back img {
+    width: 100%;
+    height: 100vh;
+    background-size: contain;
+}
+.color {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.color div {
+    cursor: pointer
+}
+.nandu{
+    cursor: pointer;
+    color: red;
+}
+.result{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 1.875rem;
+    z-index: 555;
+}
+.pause{
+    position: absolute;
+    left: 3.75rem;
+    top: 3.75rem;
+}
+.sg{
+    width: 3.4375rem;
+    position: absolute;
+}
+.up{
+    transform: rotate(-40deg);
+}
+.down{
+    transform: rotate(90deg);
+}
+.bird{
+    width: 2.125rem;
+    height: 1.5rem;
+    position: absolute;
+    left: 120px;
+    transition: top linear 0.15s;
+}
+.bird_yellow{
+    background-image: url("../img/hn1.png");
+}
+@keyframes birdShake {
+    0% {transform: translateY(0rem);}
+    50% {transform: translateY(10px);}
+    100% {transform: translateY(0rem);}
+}
+@keyframes birdMotionYellow {
+    0% {background: url("../img/hn1.png");}
+    50% {background: url("../img/hn2.png");}
+    100% {background: url("../img/hn3.png");}
+}
+@keyframes birdMotionBlue {
+    0% {background: url("../img/bn1.png");}
+    50% {background: url("../img/bn2.png");}
+    100% {background: url("../img/bn3.png");}
+}
+@keyframes birdMotionRed {
+    0% {background: url("../img/rn1.png");}
+    50% {background: url("../img/rn2.png");}
+    100% {background: url("../img/rn3.png");}
+}
+
+
+
+
+
+.show{
+    display: block;
+}
+.hidden{
+    display: none;
+}