下面是一个使用CSS动画实现旋转和变形两条线的Burgermenu的代码示例:
HTML代码:
CSS代码:
.burger-menu {
width: 30px;
height: 20px;
position: relative;
cursor: pointer;
}
.line {
width: 100%;
height: 3px;
background-color: #000;
position: absolute;
top: 50%;
transition: transform 0.3s ease-in-out;
}
.line:first-child {
transform-origin: 0 0;
}
.line:last-child {
transform-origin: 0 100%;
}
.burger-menu.open .line:first-child {
transform: rotate(45deg) translate(5px, 5px);
}
.burger-menu.open .line:last-child {
transform: rotate(-45deg) translate(5px, -5px);
}
上面的代码中,.burger-menu
是Burgermenu的容器,而.line
是两条线的样式。通过设置.line
的transform
属性,在.burger-menu
被点击时实现旋转和变形的效果。通过为.burger-menu
添加.open
类,可以控制Burgermenu的打开和关闭状态。
在JavaScript中,可以通过添加或移除.open
类来实现Burgermenu的打开和关闭。例如:
const burgerMenu = document.querySelector('.burger-menu');
burgerMenu.addEventListener('click', function() {
burgerMenu.classList.toggle('open');
});
这样,当Burgermenu被点击时,会切换.open
类的状态,从而触发CSS动画。