[分享]css两个飘窗

在网页设计中，飘窗是一个经典的效果。使用CSS可以方便地实现飘窗的效果。这里我们介绍两种常见的CSS飘窗方式。1. 固定位置飘窗.fixed { : fixed; top: 50; left: 50;...

在网页设计中，飘窗是一个经典的效果。使用CSS可以方便地实现飘窗的效果。这里我们介绍两种常见的CSS飘窗方式。

1. 固定位置飘窗

.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
} 

这个飘窗使用了CSS的position属性实现了固定位置效果。top和left属性确定了飘窗的位置。transform属性使飘窗在水平和垂直方向上居中。该方法需要指定飘窗的位置，适用于需要精确定位的场景。

2. 浮动飘窗

.float {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 200px;
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 5px #ccc;
  z-index: 999;
}
.float .close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
} 

这个飘窗使用了CSS的浮动和阴影效果。bottom和right属性确定了飘窗的位置。box-shadow属性使飘窗有阴影效果。z-index属性使飘窗浮于页面之上。同时，该方法还在飘窗里添加了关闭按钮，提高了用户体验。

以上是两种常见的CSS飘窗方式。开发者可以根据具体需求选择适合自己的方式，实现网站的美观与实用。