[分享]css3掀开纸张效果

CSS3是一种用于美化网页的技术，它有许多酷炫的效果。其中之一是纸张掀开的效果。这种效果可以给网页带来独特的视觉体验，让用户感到惊喜。.foldedcorner { : relative; width...

CSS3是一种用于美化网页的技术，它有许多酷炫的效果。其中之一是纸张掀开的效果。这种效果可以给网页带来独特的视觉体验，让用户感到惊喜。

.folded-corner {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border-radius: 15px;
  overflow: hidden;
}

.folded-corner:before {
  content: "";
  position: absolute;
  top: -25px;
  right: -25px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
}

.folded-corner:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
}

.folded-corner:hover:before {
  width: 200%;
  height: 200%;
  border-radius: 0;
  transform: rotate(-60deg) translate(80px,-80px);
  transition: 1s;
}

.folded-corner:hover:after {
  width: 200%;
  height: 200%;
  border-radius: 0;
  transform: rotate(60deg) translate(-80px,-80px);
  transition: 1s;
} 

上面的代码演示了如何实现纸张掀开的效果。我们首先创建一个容器，然后使用:before和:after伪元素分别表示纸张的两个角。接着添加:hover后缀来设置悬停时的效果，包括改变纸张的大小、形状和位置。

使用CSS3创建掀开纸张的效果不仅仅是一种视觉效果，它还可以帮助我们更好地理解CSS3的样式属性和动画效果。在实战中，我们可以将掀开纸张的效果应用到图片、导航栏和其他元素上，让网页变得更具吸引力。