如何在 Css 和 JavaScript 中创建折纸效果？

Question

我正在尝试通过 CSS 和 Javascript 创建折纸效果，就像它必须与鼠标交互一样，但我尝试这样做但没有弄清楚。 而且我也在互联网上冲浪，但没有任何关于如何做到这一点的痕迹。 效果一定是这样的Netrix Digital 。

所以任何人都可以告诉我如何做到这一点，如果你粘贴答案，请务必解释它。

这是我的代码

 body { background-color: #ccc; text-align: center; margin-top: 100px; } .bgcolor { background-color: black; color: rgba(255, 255, 255, 0.8); } .fold{ width:500px; height: 350px; background: #eee; margin: 0 auto; } .fold h1{ line-height:350px; font-family: sans-serif; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="fold"> <h1>Folding effect</h1> </div> </body> </html>

感谢您提前提供帮助:)

Answer 1

希望这会有所帮助->

CodePen 链接到纸张折叠效果

HTML ->

<div class="fold"></div>

CSS->

    body {
  background: #344;
  padding: 25px
}
/* paper */
.fold {
  postion: relative;
  height: 200px;
  padding: 25px;
  background: #fff
}
/* folding */
.fold::before {
  content:"";
  position: absolute;
  top: 32px;
  right: 32px;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: #ddd #344;
  transition: all ease 0.5s;
}
.fold:hover::before {
  border-width: 0 150px 150px 0;
  border-color: #eee #344
}

如何在 Css 和 JavaScript 中创建折纸效果？

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-07-11 03:05:40

如何在 Css 和 JavaScript 中创建折纸效果？

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-07-11 03:05:40

解决方案1
2 已采纳 2022-07-11 03:05:40