[分享]css3打开红包效果

CSS3 打开红包效果，是在网页上实现一个类似红包被打开后的效果。它可以用来增加用户体验，为网站增添一份新鲜感，今天我们就来学习一下它的实现方法。红包打开效果 CSS 代码 .box{ width: ...

CSS3 打开红包效果，是在网页上实现一个类似红包被打开后的效果。它可以用来增加用户体验，为网站增添一份新鲜感，今天我们就来学习一下它的实现方法。

红包打开效果 CSS 代码

.box{
  width: 150px;
  height: 150px;
  background-color: #f00;
  position: relative;
  overflow: hidden;
}

.box:before{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  transform-origin: left;
  transform: rotate(45deg);
  transition: all .5s ease;
}

.box:hover:before{
  transform-origin: right;
  transform: rotate(0deg);
} 

上面的代码是实现 CSS3 打开红包效果的核心代码，其中 box 是包裹红包的容器，通过 :before 伪类实现了一个占满整个容器的白色三角形，红包盖上去的一个遮罩层。通过鼠标悬浮到 box 上，改变 :before 伪类的旋转角度来模拟红包被打开的效果。

除了 CSS3 打开红包效果，CSS3 中还有很多其他有趣的效果，可以让网站变得更加动感，更加有趣。CSS3 的变化和发展，给 web 开发带来了更多的乐趣，也更加方便了我们开发出更加优秀的网站。