Question

应用过渡到CSS，以便当鼠标悬停在div 主要上时，彩色方块打开。要打开，每个方块应在其最外角旋转90度。

这是我到目前为止所拥有的。不确定如何使它们同时移动。当您将鼠标悬停在上方时，中间应该有文字使它们移动。

.container{
   
    height: 100px;
    width: 100px;
    display: flex;
    flex-wrap: wrap;
    border: solid;
    margin-top: 200;
    margin: auto;

}



.red{
    height: 50px;
    width: 50px;
    background-color: red;
    animation: move 4s;
    animation-play-state: paused;
}

@keyframes move{
    0%{


    }

    100%{
        transform: rotate(90deg);
        transform-origin: top left;
    }
}

.yellow{
    height: 50px;
    width: 50px;
    background-color:yellow;
    animation: moveYellow 4s;
    animation-play-state: paused;

   
}

@keyframes moveYellow{
    0%{


    }

    100%{
        transform: rotate(-90deg);
        transform-origin: top right;
    }
}

.blue{
    height: 50px;
    width: 50px;
    margin: auto;
    background-color:blue;
    animation: moveBlue 4s;
    animation-play-state: paused;

   
}

@keyframes moveBlue{
    0%{


    }

    100%{
        transform: rotate(-90deg);
        transform-origin: bottom left;
    }
}

.green{
    height: 50px;
    width: 50px;
    margin: auto;
    background-color: green;
    animation: moveGreen 4s;
    animation-play-state: paused;

}

.red:hover, .blue:hover, .yellow:hover, .green:hover{
    animation-play-state: running;
}



@keyframes moveGreen{
    0%{


    }

    100%{
        transform: rotate(90deg);
        transform-origin: bottom right;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        
        <div class="red"></div>
        <div class="yellow"></div> 
        <div class="blue"></div>
        <div class="green"></div>
    
        

    </div>
</body>
</html>

Answer 1

您将需要对div#main:hover应用过渡，其中正方形中的每个框都有其自己的移动 CSS文件如下所示

div#main {
    position: relative;
    height: 200px;
    width: 200px;
    margin: auto;
}
div#main .topleft {
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0px;
    left: 0px;
    background: red;
}
div#main:hover .topleft {
     transform:rotate(-90deg);
     transition: 2s;
     width: 100px;
     height: 100px;
     margin: -25px;

}

这只是一个小样本，但可以为您提供有关如何处理其余盒子以制作所需动画的想法。

关键帧的编码挑战和悬停使我有些失落，有人可以协助解决问题

1 个答案: