[分享]css3拆红包

CSS3拆红包：

最近，CSS3拆红包成了一种流行的网页设计方式。让我们来看一下如何使用CSS3来设计一个拆红包的效果。

  .red-envelope {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
      text-align: center;
      font-size: 24px;
      color: white;
      line-height: 100px;
    }
    .red-envelope:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background-color: white;
      border-radius: 50%;
    }
    .red-envelope:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background-color: red;
      border-radius: 50%;
      z-index: -1;
    }
    .red-envelope.open:before {
      transform: translate(-50%, -160%);
    }
    .red-envelope.open:after {
      transform: translate(-50%, -240%) rotate(45deg);
    } 

上面的代码使用了CSS3的伪元素和transform属性，可以实现一个简单的拆红包效果。在这个例子中，我们使用红色的背景、白色的内圈和小红点来组成一个红包的样式。通过设置:before伪元素实现白色内圈，通过:after伪元素实现小红点。当用户点击红包时，我们使用类名 "open" 来触发拆开效果。