<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);
}
网友评论