first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/作业/水管鸟/css/index.css

@@ -0,0 +1,242 @@
+*{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+audio{
+    display: none;
+}
+
+
+
+
+.readynum{
+    position: relative;
+    z-index: 1100;
+    font-size: 24px;
+    color: #000;
+    margin-left: 43%;
+    transform: translateX(-50%);
+}
+
+.result{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+}
+/* background-size：cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。 */
+/* background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 */
+body{
+    width: 100%;
+    height: 100vh;
+    background-image: url('../img/back.png');
+    background-size: contain;
+    position: relative;
+    overflow: hidden;
+    /* css控制页面文字不能被选中user-select:none; */
+    user-select: none;
+}
+
+
+.pause{
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    cursor: pointer; /* 手型鼠标 */
+    z-index: 999;
+}
+
+
+.start{
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    transform: translate(-50%, -40%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 999;
+}
+
+
+
+.ready{
+position: absolute;
+left: 50%;
+top: 45%;
+transform: translate(-50%, -45%);
+display: flex;
+flex-direction: column;
+align-items: center;
+z-index: 999;
+}
+
+
+.startBird{
+    position: absolute;
+    left: 100px;
+    /* top: 50%;
+    transform: translateY(-50%); */
+    width: 34px;
+    height: 24px;
+    transition: all linear 0.15s;
+    z-index: 999;
+}
+
+
+
+
+.choice{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 50%;
+    margin-top: 40px;
+}
+
+.speed{
+    padding: 6px;
+    border-radius: 8px;
+}
+
+
+
+.birdTheme {
+    width: 34px;
+    height: 24px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    margin: 15px 0;
+    transition: all linear 0.15s;
+    z-index: 999;
+}
+/* 小黄鸟 */
+.yellow{
+    width: 100%;
+    height: 100%;
+    background: url('../img/hn1.png');
+}
+/* 扇翅膀 */
+@keyframes yellowMotion {
+    0% {
+        background: url("../img/hn1.png");
+    }
+    50% {
+        background: url("../img/hn2.png");
+    }
+    100% {
+        background: url("../img/hn3.png");
+    }
+}
+
+/* 小红鸟 */
+.red{
+    width: 100%;
+    height: 100%;
+    background: url('../img/red1.png');
+}
+@keyframes redMotion {
+    0% {
+        background: url("../img/red1.png");
+    }
+    50% {
+        background: url("../img/red2.png");
+    }
+    100% {
+        background: url("../img/red3.png");
+    }
+}
+
+/* 小蓝鸟 */
+.blue{
+    width: 100%;
+    height: 100%;
+    background: url('../img/blue1.png');
+}
+@keyframes blueMotion {
+    0% {
+        background: url("../img/blue1.png");
+    }
+    50% {
+        background: url("../img/blue2.png");
+    }
+    100% {
+        background: url("../img/blue3.png");
+    }
+}
+
+
+
+
+.logo{}
+.play{
+    width: 60px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+
+
+/* @keyframes创建动画:通过逐步改变,从一个CSS样式设定到另一个。可以设定多次。
+单位是％，或关键字"from"和"to"。范围0-100 */
+
+
+/* 上下飞 */
+@keyframes birdShake {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(10px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
+}
+/* 抬头低头 */
+.up {
+    transform: rotate(-38deg);
+}
+
+.down {
+    transform: rotate(90deg);
+}
+
+.ground{
+    position: absolute;
+    width: 100%;
+    height: 112px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+}
+.ground img{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+
+
+
+
+/* 水管样式 */
+.sg {
+    width: 55px;
+    position: absolute;
+}
+/* 点击事件隐藏和显示 */
+.show {
+    display: block !important;
+}
+.bird{
+    display: none;
+}
+.hidden {
+    display: none;
+}