css点击按钮弹出块

在Web开发中，我们经常需要实现一些交互效果，比如点击按钮弹出块的效果。这种效果可以用CSS来实现。

/* CSS样式 */
.popup {
  display: none;
 /* 隐藏弹出块 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}
.btn {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
 

代码中，我们定义了一个弹出块和一个按钮。弹出块默认是隐藏的，使用display: none;实现。按钮使用了一些简单的样式，比如背景色、字体颜色、圆角等。

当点击按钮时，我们需要用JavaScript来控制弹出块的显示和隐藏。

// 
JavaScript代码
var popup = document.querySelector('.popup');
var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
  if (popup.style.display === 'none') {
  
  popup.style.display = 'block';
}
 else {
  
  popup.style.display = 'none';
}
}
);
 

代码中，我们使用了querySelector方法来获取弹出块和按钮的引用。然后给按钮添加了一个点击事件处理函数，通过判断弹出块的display属性，控制弹出块的显示和隐藏。

通过CSS和JavaScript的结合使用，我们可以实现各种交互效果，让网站更加生动有趣。