欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  https://github.com/comehope/front-end-daily-challenges
 
  代码解读
 
  定义dom,容器中包含8个元素,每个元素代表一个矩形色块:
 
  <divclass="icon">
 
  <span></span>
 
  <span></span>
 
  <span></span>
 
  <span></span>
 
  <span></span>
 
  <span></span>
 
  <span></span>
 
  <span></span>
 
  </div>
 
  居中显示:
 
  body{
 
  margin:0;
 
  height:100vh;
 
  display:flex;
 
  align-items:center;
 
  justify-content:center;
 
  background-color:#ccc;
 
  }
 
  定义容器尺寸:
 
  .icon{
 
  width:10em;
 
  height:10em;
 
  font-size:30px;
 
  background-color:#eee;
 
  border-radius:20%;
 
  }
 
  绘制出矩形的轮廓(边框为辅助线,最终会被删除),并放置在容器的中上方:
 
  .icon{
 
  position:relative;
 
  display:flex;
 
  justify-content:center;
 
  box-sizing:border-box;
 
  padding:1em;
 
  }
 
  .iconspan{
 
  position:absolute;
 
  width:22.5%;
 
  height:37.5%;
 
  border:1pxdashedblack;
 
  border-radius:50%/30%;
 
  }
 
  为矩形设置下标变量--n:
 
  .iconspan:nth-child(1){
 
  --n:1;
 
  }
 
  .iconspan:nth-child(2){
 
  --n:2;
 
  }
 
  .iconspan:nth-child(3){
 
  --n:3;
 
  }
 
  .iconspan:nth-child(4){
 
  --n:4;
 
  }
 
  .iconspan:nth-child(5){
 
  --n:5;
 
  }
 
  .iconspan:nth-child(6){
 
  --n:6;
 
  }
 
  .iconspan:nth-child(7){
 
  --n:7;
 
  }
 
  .iconspan:nth-child(8){
 
  --n:8;
 
  }
 
  让8个矩形依次旋转固定的角度,围合成一个圆形:
 
  .iconspan{
 
  transform-origin:center105%;
 
  transform:rotate(calc((var(--n)-1)*45deg));
 
  }
 
  为矩形设置颜色变量--c:
 
  .iconspan:nth-child(1){
 
  --c:rgba(243,156,18,0.7);
 
  }
 
  .iconspan:nth-child(2){
 
  --c:rgba(241,196,15,0.7);
 
  }
 
  .iconspan:nth-child(3){
 
  --c:rgba(46,204,113,0.7);
 
  }
 
  .iconspan:nth-child(4){
 
  --c:rgba(27,188,155,0.7);
 
  }
 
  .iconspan:nth-child(5){
 
  --c:rgba(65,131,215,0.7);
 
  }
 
  .iconspan:nth-child(6){
 
  --c:rgba(102,51,153,0.7);
 
  }
 
  .iconspan:nth-child(7){
 
  --c:rgba(155,89,182,0.7);
 
  }
 
  .iconspan:nth-child(8){
 
  --c:rgba(242,38,19,0.7);
 
  }
 
  为8个矩形上色,并删除掉起辅助线作用的边框:
 
  .iconspan{
 
  /*border:1pxdashedblack;*/
 
  background-color:var(--c);
 
  }
 
  设置混色模式,使重叠颜色能叠加在一起:
 
  .iconspan{
 
  mix-blend-mode:multiply;
 
  }
 
  增加鼠标悬停效果,当悬停时运行矩形色块展开的动画:
 
  .icon:hoverspan{
 
  animation:rotating2sease-in-outforwards;
 
  }
 
  @keyframesrotating{
 
  from{
 
  transform:rotate(0deg);
 
  }
 
  to{
 
  transform:rotate(calc((var(--n)-1)*45deg));
 
  }
 
  }
 
  注意,在动画过程中第1个矩形并没有转动,因为它是从0度转到0度,为了让它转动,要把它的结束角度设置为360度,通过修改它的下标变量来实现:
 
  .iconspan:nth-child(1){
 
  --n:9;
 
  }
 
  大功告成!


1041262361-5b873a721114c_articlex.png




本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c55473.shtml