Задача кодирования на ключевых кадрах и при наведении немного сбила меня с толку, может кто-то помочь с решением проблемы - PullRequest
Новая
       0

Задача кодирования на ключевых кадрах и при наведении немного сбила меня с толку, может кто-то помочь с решением проблемы

0 голосов
/ 31 августа 2018

Примените переходы к CSS, чтобы цветные квадраты открывались , когда div main завис. К раскрытию каждый квадрат должен повернуться на 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>

1 Ответ

0 голосов
/ 31 августа 2018

Вам нужно будет применить переходы к 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;

}

Это лишь небольшой пример, но он может дать вам представление о том, как обращаться с остальными полями для анимации, которую вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...