2017-02-23 50 views
2

Итак, у меня есть боковая панель, которая отображает только часть содержимого, когда она зависает, будет отображаться вся ширина боковой панели.Как сделать переходный эллипс в css

это код CSS:

.sidenav { 
    height: 100%; 
    width: 100px; 
    position: fixed; 
    z-index: 2; 
    top: 0; 
    left: 0; 
    background-color: #fff; 
    overflow: hidden; 
    padding-top: 20px; 
    transition: 0.8s; 
    -webkit-transition: 0.8s; 
    opacity: 0.8; 
    box-shadow: 0px 20px 50px black; 
} 
.sidenav:hover{ 
    width: 215px; 
    transition: 0.8s; 
    -webkit-transition: 0.8s; 
    overflow: hidden; 
} 

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

это иллюстрация: the initial statefinal statewhat I mean state

+0

отправить полный код в JSfiddle или codepen –

ответ

1

Вы не можете этого добиться только с помощью простого эффекта перехода. Вам нужно будет использовать CSS keyframe animations для достижения радиуса границы только от ширины перехода:

.sidenav { 
 
    height: 100%; 
 
    width: 100px; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 
    padding-top: 20px; 
 
    transition: 0.8s; 
 
    opacity: 0.8; 
 
    box-shadow: 0px 20px 50px black; 
 
    border-radius: 0; 
 
    background: black; 
 
} 
 

 
.sidenav:hover { 
 
    width: 215px; 
 
    overflow: hidden; 
 
    animation-name: roundborder; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@keyframes roundborder { 
 
    0% { border-radius: 0; } 
 
    50% { border-radius: 0 50% 50% 0; } 
 
    100% { border-radius: 0; } 
 
}
<div class="sidenav"></div>

Конечно вам нужно соответствующие префиксы поставщика для поддержки старых браузеров. См. border-radius on MDN для получения дополнительной информации.

+0

Я имею в виду, что радиус будет меняться при изменении ширины от 100px до 215px, но когда уже 215px он возвращается к нормальному – Rian

+0

Хорошо, обновил мой ответ. Для этого вам нужна анимация ключевого кадра. – andreas

+0

эй, как я делаю границу вогнутой? Является ли это возможным? – Rian