移动端项目常用的css(后续会更新)

1. 禁止选中 复制，可在全局引入

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 

2. IOS点击后底部出现小黑块的解决办法

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}

3. 解决ios上滑动不流畅

/* 当底部有fixed定位时有坑，待更新 */
.scroll-wrapper { -webkit-overflow-scrolling: touch; }

4. 隐藏IOS滚动条

/* 1 */
.list {
  width: 100%;
  height: 100%;

  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
}

/* 2 */
.list {
  overflow: hidden;   /* 外层容器 */
  overflow: auto; /* 内容容器 */
  padding-bottom: 20px;
  margin-bottom: -20px;
}

5. 适配iphoneX（底部小黑条）

/* 1. 在meta标签中加入 viewport-fit=cover
  <meta content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover,shrink-to-fit=no" name="viewport">
 */

 /* 2. css */
@supports (bottom: env(safe-area-inset-bottom)) {
  .my-rank {
    bottom: env(safe-area-inset-bottom);
  }
}

6. 给元素设置上阴影

 

 

box-shadow: 0px -7px 6px -6px rgba(0, 0, 0, 0.05);

7. 礼物盒子抖一抖特效

@keyframes shake {
  10% {
    transform: translateX(-50%) rotate(10deg);
  }
  15% {
    transform: translateX(-50%) rotate(-10deg);
  }
  20% {
    transform: translateX(-50%) rotate(5deg);
  }
  25% {
    transform: translateX(-50%) rotate(-5deg);
  }
  30%,100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

.gift {
  animation: shake infinite 2s;
}