【開發小技巧】用HTML與CSS如何建立懸停折角紙疊效果？
阿新 • • 發佈：2020-08-19
折角摺疊效果，在網站實際運用中也是非常多，當你將滑鼠懸停在上面時，就會在某些網站上看到它的折角。在這裡，我們僅用HTML與CSS來實現折角效果。以下內容將具體講解如何建立這個效果。在本文中，我們將文章分為兩部分，在第一部分中，我們將建立基本結構。在第二部分中，我們將裝飾結構。首先，我們先使用HTML來建立一個轉角摺疊效果的結構。在HTML程式碼中，我們將使用div標記建立一個基本div，併為其指定一個類名。
HTML程式碼如下：
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> web前端開發公眾號，網站：www.webqdkf.com </title> </head> <body> <center> <h1> web前端開發公眾號 </h1> <b> web前端開發公眾號，網站：<a href="http://www.webqdkf.com">www.webqdkf.com</a> </b> <div class="Fold"> <h3> web前端開發公眾號，網站：www.webqdkf.com</h3> </div> </center> </body> </html>
在本部分中，我們將僅使用CSS來修飾上部分中已建立的結構。首先，我們設定基本div元素的樣式，使其不具有摺疊效果，然後再建立摺疊效果，我們將使用CSS :: after偽元素。將其放置在div框的右上角，將頂部和右側邊框設定為與父div元素的背景顏色匹配的顏色。然後為左側和底部邊框賦予div背景顏色較深的陰影，當我們將滑鼠懸停在框上時，我們還將使用懸停選擇器來建立摺疊效果。
<style> h1 { color: #19b0cb; } .Fold { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 400px; height: 200px; background-color: #19b0cb; } h3 { margin: 20px; padding: 20px; color: #fff; } .Fold:after { position: absolute; content: ''; right: 0; top: 0; } .Fold:hover:after { transition-duration: 1s; border-bottom: 50px solid black; border-right: 50px solid white; } </style>
以上就是這兩個部分的內容，我們為懸停建立了折角效果。
最終效果如下：