[分享]css3折叠信纸源码

CSS3折叠信纸源码可以实现邮件、信件或记事等页面元素的折叠效果，为网站增加一点趣味性和互动性。下面是实现该效果的CSS3代码示例：/ 定义初始样式 / foldedpaper { : relativ...

CSS3折叠信纸源码可以实现邮件、信件或记事等页面元素的折叠效果，为网站增加一点趣味性和互动性。下面是实现该效果的CSS3代码示例：

/* 定义初始样式 */
#folded-paper {
  position: relative;
  background-color: #fafafa;
  padding: 40px 22px;
  margin: 50px auto;
  width: 300px;
  height: 200px;
  box-shadow: 0px 3px #c4c4c4;
}

#folded-paper:before, #folded-paper:after {
  content: ';
  position: absolute;
  z-index: -1;
  left: 60px;
  top: -4px;
  width: 160px;
  height: 100px;
  background: #fafafa;
  transform: skew(30deg) rotate(5deg);
  box-shadow: -1px 2px #c4c4c4;
}

#folded-paper:after {
  transform: skew(-30deg) rotate(-5deg);
  top: auto;
  bottom: -4px;
}

/* 折叠动画效果的实现 */
#folded-paper:hover {
  animation: fold 2s ease-in-out;
}

@keyframes fold {
  50% {
    transform: rotateX(90deg);
    box-shadow: -2px 0 #c4c4c4;
  }
  100% {
    transform: rotateX(180deg);
    box-shadow: 2px 0 #c4c4c4;
  }
} 

以上代码通过定义初始样式和鼠标悬浮时的折叠动画效果实现了CSS3折叠信纸效果。其中，使用伪元素:before和:after分别实现了折叠纸的两个部分，使用transform属性、box-shadow属性和rotateX函数实现了3D旋转效果。这个折叠信纸的CSS3效果虽然简单，但能够为网站设计带来不少趣味和美感。