代码示例
HTML部分:
这是一个示例文本。
CSS部分:
#myDiv {
background-color: blue;
opacity: 1;
transition: opacity 0.5s ease-in-out;
/* 这里设置渐变动画效果 */
padding: 20px;
}
#myDiv.hide {
opacity: 0;
pointer-events: none;
/* 另外,需要为隐藏的 div 禁用鼠标事件。 */
}
JavaScript部分:
function changeOpacity() {
var myDiv = document.getElementById("myDiv");
myDiv.classList.toggle("hide");
}
这段代码会在按下按钮时切换 div 的 class,从而改变不透明度。