所以,我的侧边栏只显示它的一些内容,当它悬停时它会显示所有侧边栏宽度。
.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>
我的问题是,如果侧边栏没有悬停,如何制作凹面动画?所以当它悬停并且指针再次不在侧边栏时,它会回到初始状态但是凹动画,我不能使用负百分比,那我有什么用呢?谢谢
最佳答案
我猜你必须使用 SVG 创建一个普通正方形,然后再创建两个
动画第一个是圆 Angular 的,第二个是圆 Angular 的
凹 Angular 。
关于html - 如何用CSS制作凹面动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42450772/