尝试制作圆形菜单背景。但关闭时边框半径不起作用
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e){
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu{
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 1px;
width: 1px;
background: #000;
position: fixed;
right: 30px;
top: 30px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(1);
overflow:hidden;
}
.menu-open .menu-bg:before {
transform: scale(500);
}
<div class="btn-menu"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>
JSFiddle - https://jsfiddle.net/afelixj/ew7b065h/
最佳答案
1px
因为宽度/高度不是一个好主意,我会采取不同的做法并从 scale(0)
开始:
var menuButton = document.querySelector('.btn-menu');
menuButton.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('menu-open');
});
.btn-menu {
width: 30px;
height: 30px;
border: 2px solid red;
position: relative;
z-index: 5;
float: right;
}
.menu-bg {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 40;
pointer-events: none;
z-index: 1;
}
.menu-bg:before {
content: '';
height: 100px;
width: 100px;
background: #000;
position: fixed;
right: -20px;
top: -20px;
transition: all ease .8s;
border-radius: 50%;
transform: scale(0);
overflow: hidden;
}
.menu-open .menu-bg:before {
transform: scale(5);
}
<div class="btn-menu"><a href=""><span>Menu</span></a></div>
<div class="menu-bg"></div>
关于css - CSS 转换期间边框半径不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63363922/