CSS完成多层嵌套循环构造最外层转动其它层不转

日期:2021-02-28 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

有这样1个情景:1个圆描述器,最外层器皿的情况为圆弧,如今要将最外层的圆弧开展转动,确保里边的器皿里边的內容不开展转动,接下来将跟大伙儿共享1种处理计划方案,先看下最后完成的实际效果:

 

完成思路

  • 最外层div设定边框倒角百分之50,外溢掩藏
  • 设定最外层情况为圆弧的情况图
  • 界定外层转动动漫,转动度数为正数
  • 界定里层转动动漫,转动度数为负数
  • 起动动漫,刚开始转动
  • 外层为正数转动,里层为负数转动,恰好相抵,理想化实际效果完成

完成全过程

dom构造一部分:合理布局外层div和里层div

load-panel为外层div, headPortrait-img-panel 为里层div, loadWhirl 为外层转动动漫, avatarRotation 为里层转动动漫。

<!--头像地区-->
<div class="headPortrait-panel">
    <!--载入层-->
    <div class="load-panel loadWhirl">
        <!--头像显示信息层-->
        <div class="headPortrait-img-panel avatarRotation">
            <img src="../assets/img/login/LoginWindow_BigDefaultHeadImage@2x.png"/>
        </div>
    </div>
</div>

css一部分:对款式开展合理布局,完成转动动漫逻辑性。

  /*头像地区*/
  .headPortrait-panel{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;

    /*载入层*/
    .load-panel{
      width: 240px;
      height: 240px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url("../img/login/loading-circle@2x.png");

      img{
        width: 100%;
        height: 100%;
      }

      // 头像转动动漫
      .avatarRotation{
        animation: internalAvatar 3s linear;
        // 动漫无尽循环系统
        animation-iteration-count:infinite;
      }

      /*头像显示信息层*/
      .headPortrait-img-panel{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
        border: solid 1px #ebeced;

        img{
          width: 100%;
          height: 100%;
        }
      }
    }

    // 外界转动动漫
    .loadWhirl{
      animation: externalHalo 3s linear;
      // 动漫无尽循环系统
      animation-iteration-count:infinite;
    }
  }

  // 界定外界光环转动动漫
  @keyframes externalHalo {
    0%{
      transform: rotate(0deg);
    }
    25%{
      transform: rotate(90deg);
    }
    50%{
      transform: rotate(180deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }

  // 界定內部头像转动动漫
  @keyframes internalAvatar {
    0%{
      transform: rotate(0deg);
    }
    25%{
      transform: rotate(⑼0deg);
    }
    50%{
      transform: rotate(⑴80deg);
    }
    100%{
      transform: rotate(⑶60deg);
    }
  }

新项目详细地址

上述编码详细地址:chat-system

新项目克隆到当地后,浏览 http://localhost:8020/login 便可查询实际效果
本文完成实际效果文档相对路径:src/views/login.vue

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css3翻牌翻数据的示例编码 返回下一篇:没有了