[分享]css3开关百叶窗效果

在CSS3中，有一种华丽的开关百叶窗效果，可以使网页设计更加生动、精美。本文将带您一步步实现这种效果。首先，在html文件中创建一个开关标签，如下： 接下来，使用CSS3中的transition属...

在CSS3中，有一种华丽的开关百叶窗效果，可以使网页设计更加生动、精美。本文将带您一步步实现这种效果。

首先，在html文件中创建一个开关标签，如下：

<div class="switch">
  <div class="shutter"></div>
</div> 

接下来，使用CSS3中的transition属性，实现开关百叶窗的动画效果。代码如下：

.switch {
  position: relative;
  width: 60px;
  height: 35px;
  background-color: #ccc;
  border-radius: 18px;
  overflow: hidden;
}

.shutter {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-color: #fff;
  transition: all 0.5s ease-in-out;
}

.switch.active .shutter {
  transform: translateX(100%);
} 

上述代码实现了一个带有圆角的矩形开关，并定义了其状态。.active类表示开关已经被打开，.shutter类定义了半透明的白色卷帘条，并使用transition属性实现500毫秒的动画效果。在.active状态下，通过transform属性，将白色卷帘条向右移动100%。

最后，在jquery中，通过为开关标签添加click事件，动态添加和移除.active类，从而实现开关的打开和关闭。代码如下：

$('.switch').click(function() {
  $(this).toggleClass('active');
}); 

至此，开关百叶窗效果实现完毕！