Потренируемся с переходами значений css свойств.
Для элемента div.box
при наведение должны происходить следующие изменения:
- ширина должна стать
400px
, задержка перехода1s
, длительность -4s
; - высота должна стать
400px
, задержка перехода2s
, длительность -4s
; - углы должны стать скруглены на
50%
, задержка перехода2s
, длительность -4s
; - цвет заднего фона должен стать
#861657
, задержка перехода не должно быть, длительность -4s
.
Для добавления переходов используй отдельные свойства; порядок при перечислении такой же, как в списке выше.
Эта задача — часть курса по Full-Stack JavaScript
Ты можешь задать свой вопрос в комментариях под постом
Если ты уже решил задачу, то не стесняйся помочь другим
index.html
<!DOCTYPE html>
<html>
<head>
<title>Transitions</title>
<style>
body {
display: grid;
place-items: center;
}
.box {
width: 200px;
height: 200px;
border-radius: 8px;
background-color: #DDFFF7;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>