如何在 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