CSS3知识汇总25：旋转彩虹

<div class="rainbow">

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</div>

彩虹的初始状态是一些彩色的色块，当鼠标指针悬停在这些色块上时，它们变化成一条彩虹。本项目的主要开发思路是把整个流程分成：绘制初始状态、绘制终止状态、设计缓动效果3个部分。

body{

  margin:0;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

}

/*设置一个长方形，并画出辅助线*/

.rainbow{

    width: 20em;

    height: 10em;

    position: relative;

    display: flex;

    outline: 1px dashed black;

    transition: 1s;

}

/*子元素设置背景色，依次是红、橙、黄、绿、蓝、紫*/

.rainbow div:nth-child(1){

    color: orangered;

    --n:1;

}

.rainbow div:nth-child(2){

    color: orange;

    --n:2;

}

.rainbow div:nth-child(3){

    color: yellow;

    --n:3;

}

.rainbow div:nth-child(4){

    color: mediumspringgreen;

    --n:4;

}

.rainbow div:nth-child(5){

    color: deepskyblue;

    --n:5;

}

.rainbow div:nth-child(6){

    color: mediumpurple;

    --n:6;

}

/*设置子元素的样式为横向排列的竖条纹，用滤镜设置为不透明度*/

.rainbow div{

    box-sizing: border-box;

    flex:1;

    background-color: currentColor;

    filter: opacity(0.6);

    transition: 0.5s;

    transition-delay: calc(0.1s*var(--n));

}

.rainbow:hover{

    align-items: center;

    justify-content: center;

    transform: translateY(5em);

}

.rainbow:hover div{

    position: absolute;

    width: calc(100% - 2em * (var(--n) - 1));

    height: calc(200% - 2em * (var(--n) - 1));

    border-radius: 50%;

    /*为了得到半圆，背景色设置为透明，两条边框绘制出半圆弧*/

    background-color: transparent;

    border: 1em solid;

    border-color: transparent currentColor currentColor transparent;

    /*旋转*/

    filter: opacity(1);

    transform: rotate(225deg);

}