小程序(移動端)經常使用的幾個css效果

時間 2019-11-07

標籤程序移動經常使用幾個 css 效果欄目無線简体版

原文原文鏈接

分享幾個小程序(移動端)經常使用的css效果,話很少說,趕忙上車走起!javascript

showModal彈窗

<!--showModal.vue-->
<template>
    <div class="showModal-container" :class="show && 'show'">
        <div class="modal">
            <div class="title">舒適提示</div>
            <div class="text">確認刪除所有歷史記錄？</div>
            <div class="button flex">
                <span @click.stop="operateCancel" class="cancel">取消</span>
                <span @click.stop="operateConfirm" class="confirm">確認</span>
            </div>
        </div>
    </div>
</template>
...
<style scoped lang="scss">
.showModal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  text-align: center;
  -ms-transform: scale(1.185);
  transform: scale(1.185);
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out 0s;
  opacity: 0; //核心代碼
  pointer-events: none;//核心代碼
  &.show {
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;//核心代碼
    pointer-events: auto;//核心代碼
  }
}
...
</style>
複製代碼

也是一個很簡單的彈窗佈局,所以多餘代碼省略了,這裏重點只討論下效果的核心代碼實現

opacity: 透明度,這個屬性必定是必要的,默認全透明,當打開彈窗默認徹底不透明

pointer-events: 是css3中的一個屬性,支持的值也是至關豐富,不過大多數都是與svg有關的,通常也用不到,在這裏咱們只須要重點關注下 pointer-events:none 這個屬性值就ok. pointer-events:none從字面意思就能夠get到其中心思想,大概就是讓點擊事件(鼠標事件)拜拜.這裏的彈窗效果之因此可以實現,該屬性必定是c位出道.

想要了解更多關於pointer-events信息,推薦這篇文章 CSS3 pointer-events:none應用舉例及擴展

loading(頁面或列表加載動畫)

額...,這個也很差描述,咱們仍是直接上代碼吧

<!--1.小yaya loading-->
<template>
    <div class="ceshi-container">
        <div class="mask" v-if="showLoading">
            <div class="main">
                <div class="bean">
                    <img src="https://user-gold-cdn.xitu.io/2019/10/22/16df17184f419eeb?w=640&h=640&f=png&s=137314">
                </div>
                <div class="shadow"></div>
                <div class="load-text">
                   拼命加載中<span class="dotting"></span>
                </div>
            </div>
        </div>
    </div>
</template>

...
<style scoped lang="scss">
.ceshi-container {
...
  .main {
    position: absolute;
    height: 150rpx;
    width: 120rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .load-text {
    position: absolute;
    width: 500rpx;
    bottom: -50rpx;
    left: 50%;
    transform: translateX(-50%);
    color: #999;
    font-size: 28rpx;
    text-align: center;
    .dotting {
      display: inline-block;
      width: 10px;
      min-height: 2px;
      padding-right: 2px;
      border-left: 2px solid currentColor;
      border-right: 2px solid currentColor;
      background-color: currentColor;
      background-clip: content-box;
      box-sizing: border-box;
      animation: dot 4s infinite step-start both;
    }
    .dotting:before {
      content: "...";
    } /* IE8 */
    .dotting::before {
      content: "";
    }
    :root .dotting {
      margin-left: 2px;
      padding-left: 2px;
    } /* IE9+ */
  }
  .bean {
    width: 128rpx;
    height: 128rpx;
    animation: bean 2s linear infinite alternate;
  }
  .bean img {
    width: 100%;
    height: 100%;
  }
  .shadow {
    width: 60rpx;
    height: 10rpx;
    background: url("http://static.ledouya.com/Fj1YwXiZBK9zP8o0uUgQrfAh2-UF")
      no-repeat center center;
    background-size: contain;
    animation: shadow 1s linear infinite alternate;
  }

  @keyframes dot {
    25% {
      border-color: transparent;
      background-color: transparent;
    } /* 0個點 */
    50% {
      border-right-color: transparent;
      background-color: transparent;
    } /* 1個點 */
    75% {
      border-right-color: transparent;
    } /* 2個點 */
  }
  @keyframes bean {
    0% {
      transform: scale(1, 1) translateY(-5rpx);
      height: 128rpx;
    }
    50% {
      transform: scale(1, 0.9) translateY(50rpx);
      height: 115rpx;
    }
    100% {
      transform: scale(1, 1) translateY(-5rpx);
      height: 128rpx;
    }
  }
  @keyframes shadow {
    from {
      transform: scale(0.5, 0.5);
    }
    to {
      transform: scale(1, 1);
    }
  }
}
複製代碼

關於文字... css的實現方法能夠參考這篇文章,太特麼優秀了,向大佬致敬!

<!--loading-vue(轉圈圈動態加載組件)-->
<template>
  <div class="loading-contaienr">
    <div class="type-more-loading flex" v-if="loadMore != 0">
      <span class="content" :class="loadMore == 1 ? 'load' : loadMore == 2 ? 'over' : 'error'"></span>
    </div>
  </div>
</template>

<script>
export default{
  props: {
    loadMore: {
      type: String || Number,
      default: 1 //0:表示無狀態(隱藏),1:加載中,2:沒有更多了,3:加載錯誤
    }
  },
  components: {},
  data() {
    return {};
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  onLoad() {}
};
</script>

<style scoped lang="scss">
.loading-contaienr {
  .type-more-loading {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    justify-content: center;
    height: 80rpx;
    text-align: center;
    color: #666;
    font-size: 24rpx;
    .content {
      position: relative;
      &.load:before {
        position: absolute;
        left: -30rpx;
        top: 20%;
        content: "";
        display: block;
        width: 24rpx;
        height: 24rpx;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 4rpx solid transparent;
        border-top-color: #666;
        border-left-color: #666;
         border-right-color: #666;
        border-radius: 50%;
        -webkit-animation: load-more-spinner 2s linear infinite;
        animation: load-more-spinner 2s linear infinite;
      }
      &.load:after {
        content: "加載中...";
      }
      &.over:after {
        content: "沒有更多了";
      }
      &.error:after {
        content: "加載失敗";
      }
    }
  }
}
@-webkit-keyframes load-more-spinner {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load-more-spinner {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

複製代碼

loadProgress(仿h5頂部加載進度條)

<!--loadProgress.vue-->
<template>
  <div class="load-progress" :class="loadProgress!=0?'show':'hide'" :style="[{top:CustomBar+'px'}]">
    <div
      class="load-progress-bar bg-green"
      :style="[{transform: 'translate3d(-' + (100-loadProgress) + '%, 0px, 0px)'}]"
    ></div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      loadProgress: 0
    };
  },
  methods: {
    LoadProgress(e) {
      this.loadProgress = this.loadProgress + 3;
      if (this.loadProgress < 100) {
        setTimeout(() => {
          this.LoadProgress();
        }, 100);
      } else {
        this.loadProgress = 0;
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.LoadProgress();
  }
};
</script>

<style scoped lang="scss">
.load-progress {
  pointer-events: none;
  top: 0;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 2000;
}

.load-progress.hide {
  display: none;
}

.load-progress .load-progress-bar {
  position: relative;
  width: 100%;
  height: 4rpx;
  overflow: hidden;
  transition: all 200ms ease 0s;
}

.load-progress .load-progress-spinner {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  z-index: 2000;
  display: block;
}

.load-progress .load-progress-spinner::after {
  content: "";
  display: block;
  width: 24rpx;
  height: 24rpx;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 4rpx transparent;
  border-top-color: inherit;
  border-left-color: inherit;
  border-radius: 50%;
  -webkit-animation: load-progress-spinner 0.4s linear infinite;
  animation: load-progress-spinner 0.4s linear infinite;
}

.bg-green {
  background-color: $main_color;
  color: #ffffff;
}
.text-green {
  color: $main_color;
}
</style>

複製代碼