CSS3 实现同级元素点击显示隐藏：无需 display:none、visibility、position、opacity、宽高、scale 或 translate

.container {
  position: relative;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease;
}

var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');

box1.addEventListener('click', function() {
  if (box2.style.opacity === '0') {
    box2.style.opacity = '1';
  } else {
    box2.style.opacity = '0';
  }
});

通过设置第二个元素的 'opacity: 0;'，使其初始状态下不可见。点击第一个元素时，通过修改第二个元素的 'opacity' 属性来实现显示和隐藏，并使用 'transition' 属性设置过渡效果，实现渐变显示或隐藏。