zoukankan      html  css  js  c++  java
  • vue 组件封装 css3 loading 图

    下面我教大家实现下 基于vue 组件模版实现一下loading 菊花图,

    并附上codepen 链接:https://codepen.io/lightzhang-the-sans/pen/GRKwMaN

    <template>
      <div class="spinner">
        <i class="point" v-for="i in divCount" :key="i"></i>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Loading',
      data () {
        return {
          divCount: 6
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }
    
    @keyframes loading {
      0% {
        opacity: 0.4;
        width: 5px;
        height: 5px;
      }
      50% {
        opacity: 0.8;
        width: 10px;
        height: 10px;
      }
      100% {
        opacity: 0.4;
        width: 5px;
        height: 5px;
      }
    }
    
    .spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: rotate 1.5s linear infinite;
      animation-fill-mode: forwards;
      // background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
      .point {
        background: linear-gradient(to bottom, #094170 0%, #01305e 100%);
        width: 5px;
        height: 5px;
        opacity: 0.4;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        transform-origin: center center;
        animation: loading 1.5s linear infinite;
        animation-fill-mode: forwards;
        &:nth-child(1) {
          transform: rotate(0deg) translate(15px, 0);
          animation-delay: 0s;
        }
        &:nth-child(2) {
          transform: rotate(60deg) translate(15px, 0);
          animation-delay: 0.3s;
        }
        &:nth-child(3) {
          transform: rotate(120deg) translate(15px, 0);
          animation-delay: 0.6s;
        }
        &:nth-child(4) {
          transform: rotate(180deg) translate(15px, 0);
          animation-delay: 0.9s;
        }
        &:nth-child(5) {
          transform: rotate(240deg) translate(15px, 0);
          animation-delay: 1.2s;
        }
        &:nth-child(6) {
          transform: rotate(300deg) translate(15px, 0);
          animation-delay: 1.5s;
        }
      }
    }
    </style>
    View Code

    要注意 使用 

      transform-origin: center center;  这个旋转 会在中心点进行。
  • 相关阅读:
    js、css等文件引入空白问题
    Vue 组件 data为什么是函数
    安装Node,创建vue项目,运行及打包
    JQuery移除事件
    百度地图定位
    移动端导航过多,点击导航左右滚动回弹
    移动端开发模板
    移动端左右滑动导航
    使用‘圣杯布局’、‘双飞翼布局’来解释自适应的三栏水平布局
    css实现三角箭头
  • 原文地址:https://www.cnblogs.com/FlowLight/p/11555169.html
Copyright © 2011-2022 走看看