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;

 

　　}

 

　　大功告成！







本文转载自中文网