CSS实现多层嵌套结构最外层旋转其它层不旋转效果纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中LESS 让css也支持变量，运算符，include,嵌套规则等等 使用CSS做出一个嵌套导航.简单学习css组合与CSS嵌套的写法CSS 即将支持嵌套,SASS/LESS 等预处理器该何去何从

 /*头像区域*/ .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); } }