CSS实现多层嵌套结构最外层旋转其它层不旋转效果

简介: CSS实现多层嵌套结构最外层旋转其它层不旋转效果

前言

有这样一个场景:一个圆形容器,最外层容器的背景为圆弧,现在要将最外层的圆弧进行旋转,保证里面的容器里面的内容不进行旋转,接下来将跟大家分享一种解决方案,先看下最终实现的效果:


640.gif


实现思路


  • 最外层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(-90deg);
  }
   50%{
     transform: rotate(-180deg);
  }
   100%{
     transform: rotate(-360deg);
  }
}


项目地址


上述代码地址:请阅读原文

  • 项目克隆到本地后,访问 http://localhost:8020/login 即可查看效果
  • 本文实现效果文件路径:src/views/login.vue


写在最后


  • 文中如有错误,欢迎在原文评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊


相关文章
|
1月前
CSS3自动旋转正方体3D特效
CSS3自动旋转正方体3D特效
31 3
CSS3自动旋转正方体3D特效
|
1月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
9月前
|
前端开发
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
CSS布局:浮动 (结构伪类选择器、伪元素、标准流、浮动、清除浮动)
47 0
|
1月前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
23 1
|
1月前
|
前端开发
css结构伪类
css结构伪类
18 2
|
1月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
|
1月前
|
XML 前端开发 开发者
css基本结构
【4月更文挑战第20天】css基本结构
21 7
|
1月前
|
前端开发
css的基础结构
【4月更文挑战第14天】css的基础结构
32 6
|
1月前
|
Web App开发 前端开发 JavaScript
CSS 原生嵌套语法来了!
CSS 原生嵌套语法来了!
|
1月前
|
前端开发 JavaScript 容器
Sass的嵌套CSS 规则详细教程
Sass的嵌套CSS 规则详细教程
59 0