如何创建FA-Bar动画菜单

我正在努力使我的I类动画化fa bars 这样汉堡菜单在点击时就会旋转和交叉。

我还没有找到一种方法来制作动画，所以找到了这个。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, 
initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}

. change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>


<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div> <script>function myFunction(x) {
x.classList.toggle("change");
}
</script>

</body>
</html>

问题是，我如何在我的网站上实现它，以便它以相同的容量替换fa栏和功能？

<a id="mobile-nav" href="#"> <div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div> </a> <script> function myFunction(x){ x.classList.toggle(\'change\'); } </script>

.container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } . change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }

覆盖/忽略活动主题中的css，以免干扰我的自定义css

我正在编写一个简单的插件，在页面/帖子上显示一个具有自定义样式的表单，用于输入字段、复选框、按钮等。。。通过短代码。当用户在页面中编写短代码时，它会生成一些CSS、一些HTML和一些JavaScript，但由于活动主题CSS，结果并没有按我所想的那样呈现。事实上，如果我在一个简单的HTML文件中编写了相同的CSS、HTML和JavaScript组合，那么呈现效果是完美的，如果在WordPress中，我更改了主题，呈现效果就会改变。。。如何通过将控件呈现为插入简单的HTML页面，防止活动主题干扰插件？EDI

相关推荐

覆盖/忽略活动主题中的css，以免干扰我的自定义css